1

私は持っています：

userAccess物体：

var userAccess = new (
  function() {
      this.userLogedIn = false;
  }
);

モデルビューがあり、UIにバインドされています

var modelview = new (
  function(){             

     this.itemVisible = 
       function(data) {
           if(data.id === "ID2")
             return userAccess.userLogedIn;

            return true;
       };     

    this.items = [{id:"ID1", text:"text1"}, {id:"ID2", text:"text2"}];
  }
);

UIでは、foreachバインディング内に次のものがあります。

<span data-bind="text: text, visible:$parent.itemVisible($data)"> </span>

したがって、要素の可視性はの関数にバインドされます。spanmodelview

この関数は、の値と値に基づいて現在のアイテムの可視性を決定します。IDuserAccess

問題：

このシナリオでは、双方向バインディングは機能しません。たとえばuserAccess.userLogedIn = true、要素「ID2」を表示しないようにするとします。

これは、の欠如によるものですobservableが、私には、このパターンで観測量を適合させることができないようです。

バインディングを手動で更新できることも知っていますが、可能であればこれを避けたいと思います。

ここで明らかな何かが欠けているような気がします。

CodePenの完​​全なソース

4

1 に答える 1

2

おそらく、オブザーバブルを使用するようにセットアップ全体をリファクタリングする必要があります。それ以外の場合、自動ビュー更新がないため、ノックアウトの使用はあまり意味がありません（お気づきのとおり）。

var userAccess = new (
    function() {
        // It is likely that this value will change, so make it an observable!
        this.userLogedIn = ko.observable(false);
    }
);

// Create a "class" for the items in the list be able to encapsulate behavior /
// properties such as "is this item visible"?
var Item = function(id, text) {
    var self = this;

    self.id = id; // <-- will most likely never change (?) => not an observable
    self.text = ko.observable(text);

    // Use a "computed observable" for things that require more sophisticated logic
    self.visible = ko.computed(function() {
        if (self.id === "ID2") {
            return userAccess.userLogedIn(); // <-- observable = () required!
        } else {
            return true;
        }
    });
};

var modelview = new (
    function() {             
        this.items = ko.observableArray([
            new Item("ID1", "text1"), new Item("ID2", "text2")
        ]);
    }
);

とHTMLで

<span data-bind="text: text, visible: visible"> </span>

例： http： //jsfiddle.net/a89VL/

于 2013-01-08T10:53:07.350 に答える