javascript 如何在 BackboneJS 中显示 Model 属性的选择列表(下拉列表)?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7044227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 22:47:18  来源:igfitidea点击:

How can I display a select list (dropdown) for a Model property in BackboneJS?

javascriptbackbone.jsknockout.js

提问by samandmoore

I am trying to build a simple contact editor application in Backbone.js and I have run into a bit of an issue that I don't know how to solve because I'm not familiar with Backbone.js yet.

我正在尝试在 Backbone.js 中构建一个简单的联系人编辑器应用程序,但我遇到了一个我不知道如何解决的问题,因为我还不熟悉 Backbone.js。

I have a Model Contactand that item has a field ProductLineID(each Contact has a Product Line that it is associated with). In displaying the editor for this Contact I would like to display a dropdown list with the possible ProductLine options and have it preset to the current value. How would I do that in Backbone.js?

我有一个模型Contact,该项目有一个字段ProductLineID(每个联系人都有一个与之关联的产品线)。在显示此联系人的编辑器时,我想显示一个包含可能的 ProductLine 选项的下拉列表,并将其预设为当前值。我将如何在 Backbone.js 中做到这一点?

I know how to do it in knockout.js with data-binding:

我知道如何使用数据绑定在 Knockout.js 中做到这一点:

<select id="ProductLineID" name="ProductLineID"
        data-bind="options: productLineOptions, 
        optionsValue: 'ID', 
        optionsText: 'Name', 
        value: ProductLineID, 
        optionsCaption: 'All'">
</select>

In this example productLineOptions is a JSON object that is already preloaded on the page.

在此示例中,productLineOptions 是一个已预加载到页面上的 JSON 对象。

That would accomplish precisely what I want, but I don't know how to do the equivalent in Backbone.js.

这将完全实现我想要的,但我不知道如何在 Backbone.js 中做等效的事情。

I can provide more code from my actual example, but this seems like it's a bit of a trivial example and does not require specific code.

我可以从我的实际示例中提供更多代码,但这似乎是一个微不足道的示例,不需要特定代码。

回答by satchmorun

Something like the following would work if you used the underscore templates:

如果您使用下划线模板,则类似以下内容将起作用:

<select id="ProductLineID" name="ProductLineID">
    <option value="">--select a product line--</option>
    <% _(productLineOptions).each(function(pl) { %>
      <option value="<%= pl.ID %>"><%= pl.Name %></option>
    <% }); %>
</select>

And then you would just have to make sure that you passed in the productLineOptionsobject into the template's context.

然后你只需要确保你将productLineOptions对象传递到模板的上下文中。

回答by Edward M Smith

Backbone.js does not do databinding out of the box, like Knockout does. It leaves that aspect up to the developer to do however they wish. The basic way is to set up event listeners for changes.

Backbone.js 不像 Knockout 那样开箱即用地进行数据绑定。这让开发人员可以按照他们的意愿去做。基本方法是为更改设置事件侦听器。

If you do want to do knockout-style databinding, there's a project which may support what you need.

如果您确实想做淘汰赛风格的数据绑定,那么有一个项目可以支持您的需求。

https://github.com/derickbailey/backbone.modelbinding

https://github.com/derickbailey/backbone.modelbinding