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>

所以元素的可见性绑定到's 函数。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 回答