javascript - knockout : Best way to bind visibility to both item and a parent property?

Question

我正在创建一个编辑屏幕，我希望人们从列表中删除项目。该列表正常显示，直到“ Controller ”对象进入编辑模式。然后用户可以删除项目。应将项目标记为删除并按原样显示，然后当用户保存编辑时，它们将被删除并通知服务器。

我实际上让这一切正常工作，但我能做到的唯一方法是在绑定(bind)中使用文字条件，这看起来很丑，我不太喜欢。有更好的方法吗？

工作 fiddle :http://jsfiddle.net/L1e7zwyv/

标记:

<div id="test">
        <a data-bind="visible: IsViewMode, click: edit">Edit</a>
        <a data-bind="visible: IsEditMode, click: cancel">Cancel</a>
        <hr/>
        <ul data-bind="foreach: Items">
                <li data-bind="css: CssClass">
                        <span data-bind="visible: $parent.IsViewMode() || $data._Deleting(), text: Value"></span>
                        <!-- ko if: $parent.IsEditMode() && !$data._Deleting() -->
                                <input type="text" data-bind="value: Value"/>
                                <a data-bind="click: $parent.deleteItem">Del</a>
                        <!-- /ko -->
                </li>
        </ul>
</div>

代码:

function ItemModel(val)
{
        var _this = this;

        this.Value = ko.observable(val);
        this._Deleting = ko.observable();

        this.CssClass = ko.computed(
                function()
                {
                        return _this._Deleting() ? 'deleting' : '';
                }
        );
}

function ManagerModel()
{
        var _this = this;

        this.Items = ko.observableArray([
                new ItemModel('Hell'),
                new ItemModel('Broke'),
                new ItemModel('Luce')
        ]);

        this.IsEditMode = ko.observable();
        this.IsViewMode = ko.computed(function() { return !_this.IsEditMode(); });

        this.edit = function(model, e)
        {
                this.IsEditMode(true);
        };

        this.cancel = function(model, e)
        {
                for(var i = 0; i < _this.Items().length; i++)
                        _this.Items()[i]._Deleting(false);

                this.IsEditMode(false);
        };

        this.deleteItem = function(model, e)
        {
                model._Deleting(true);
        };
}

ko.applyBindings(new ManagerModel(), document.getElementById('test'));

Answer 1

你可以:

• 环绕另一个 span 来分隔绑定(bind)，但这会降低效率。
• 在同一元素上同时使用 visible: 和 if: 绑定(bind)来实现相同的功能，
• 在 itemModel isVisible() 上编写一个函数，接受父级作为参数，使您的绑定(bind)可见:$data.isVisible($parent)。
• 事后思考:如果这在多个地方出现，您可以编写一个辅助函数来组合可见性绑定(bind)

  // reprisent variables from models
  var v1 = false;
  var v2 = false;
  var v3 = false;
  
  
  // Helper functions defined in main script body - globally accessible
  function VisibilityFromAny() {
    var result = false;
    for(var i = 0; i < arguments.length; i++ ) result |= arguments[i];
    return Boolean(result);
  }
  
  function VisibilityFromAll() {
    var result = true;
    for(var i = 0; i < arguments.length; i++ ) result &= arguments[i];
    return Boolean(result);
  }
  
  
  // represent bindings
  alert(VisibilityFromAny(v1, v2, v3));
  alert(VisibilityFromAll(v1, v2, v3));

第三个选项是像您这样的 MVVM 狂热者最流行的技术，根据我所见，它可以将变量组合到一个绑定(bind)中，它很有意义，并且使所有逻辑远离 View 模型中的 View 标记。

就我个人而言，我喜欢您目前使用的语法，(尽管我也将自己算作 MVVM 狂热者)这在 View 标记中清楚地表明该元素的可见性绑定(bind)到 2 个项目而不是隐藏这些细节在函数中。