Knockout - 绑定到单个集合项

时间:2012-11-10 13:11:44

标签: knockout.js

我有一个可观察的文化特定对象集合。需要从主编辑屏幕单独编辑/显示不变项目。

问题是 - 我可以双向绑定到集合中的单个项目。

这个更加复杂的UI / Viemodel的简化版本可以在这个小提琴上找到:

http://jsfiddle.net/Lu2y8/8/

我在我的视图模型中尝试了计算的可写属性,但它没有检测到集合中何时更改了不变项

您的意见将不胜感激。代码列在下面:

var ItemDescription = function () {
    var me = this;

    me.CultureInvariantId = ko.observable(0);
    me.CultureFormat = ko.observable('');
    me.Description = ko.observable('');
    me.IsInvariant = ko.observable(false);
};

function viewModel()
    {
      var me = this;
      me.Name = ko.observableArray();   
      me.InvariantName = ko.observable('');  




}
    function Initialize()
{
   var model = new viewModel();

     var invItemDescription = new ItemDescription();
      invItemDescription.Description('Invariant description');
      invItemDescription.CultureFormat ('');
      invItemDescription.IsInvariant  = true;

       model.Name.push(invItemDescription);

     var usItemDescription = new ItemDescription();
      usItemDescription.Description('USA description');
      usItemDescription.CultureFormat ('en-US');
      usItemDescription.IsInvariant  = false;

    model.Name.push(usItemDescription);

    return model;   

}

      ko.applyBindings(new Initialize());  

1 个答案:

答案 0 :(得分:1)

如果我理解你要做什么,那么我认为一个不错的选择是创建一个代表不变ItemDescription对象的计算observable。然后,您可以使用with绑定将编辑器绑定到其属性。

类似的东西:

function viewModel()
    {
      var me = this;
      me.Name = ko.observableArray();  

      me.SelectedName = ko.observable();

      me.InvariantName = ko.computed(function() {
          return ko.utils.arrayFirst(me.Name(), function(name) {
              return name.IsInvariant; 
          });
      });
}

使用标记:

<select data-bind="options: Name, optionsText: 'Description', value: SelectedName">
</select>
<div data-bind="with: SelectedName">
   <textarea data-bind="value: Description"> </textarea>    
</div>

Edit Invariant:
<div data-bind="with: InvariantName">
    <input type="input" data-bind="value: Description" />
</div>

示例:http://jsfiddle.net/rniemeyer/3cH8T/