在淘汰赛中将属性绑定到模型视图函数

Question

我有：

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>

所以span 元素的可见性 绑定到modelview 的函数。

该函数根据其ID 和userAccess 的值确定当前 项的可见性。

问题：

双向绑定在这种情况下不起作用。例如，如果我使userAccess.userLogedIn = true 元素“ID2”不可见。

这是因为缺少observable，但在我看来，我无法适应这种模式的可观察对象。

我也知道我可以手动更新绑定，但如果可能的话，我想避免这种情况。

我觉得我在这里遗漏了一些明显的东西。

Complete source on CodePen

Answer 1

您可能应该重构整个设置以使用可观察对象。否则，由于缺少自动视图更新（如您所见），使用敲除没有多大意义。

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/