2

文化固有のオブジェクトの観察可能なコレクションがあります。メインの編集画面とは別に、不変アイテムを編集/表示する必要があります。

問題は、コレクション内の 1 つのアイテムに双方向バインディングを作成できるかどうかです。

はるかに複雑な 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());
4

1 に答える 1

1

あなたが何をしようとしているのかを理解していれば、不変ItemDescriptionオブジェクトを表す計算されたオブザーバブルを作成するのが適切なオプションだと思います。次に、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/

于 2012-11-10T13:53:37.833 に答える