Question

我正在尝试遍历一个knockouts数组，每个元素都必须有一个唯一的id。我的数据结构中有一个id，我想用它。好吧，如果我展示它会更容易。

    <div class="row">      
         <div data-bind="foreach: something">
             <div style="display: none;" class="col-xs-12" data-bind="attr: {id: id}">
                      hidden stuff
             </div>
             <div class="col-xs-1 hidden-menu-trigger-button">
                 <div style=" height:inherit; line-height:6px; cursor:pointer; color:black" onclick="$('#' + $id).slideToggle('slow1', null);"> //problem is I assume here
             </div>      

         </div>

    </div>

所以我相信当我绑定id作为属性是好的但是当我尝试定义onclick事件时，我不知道如何获取id的值。

Answer 1

首先，最重要的是：永远不要使用内联事件处理程序。期间。从HTML中删除所有onclick="..."以及您可能拥有的任何其他事件属性。

特别是对于淘汰赛，它可以为您处理所有上下文并提供click绑定，您可以使用内联事件处理程序自行拍摄。

对于淘汰赛，在将其转换为视图（即视觉HMTL表示）之前，拥有一个有效的抽象视图模型非常重要。

在您的情况下，您希望封装项目的可见性。这意味着你需要一个observable，让我们调用它visible，以及一个切换该属性的函数toggleVisible()。很简单：

function Something(id) {
    var self = this;

    self.id = ko.observable(id);
    self.visible = ko.observable(false);
    self.toggleVisible = function () {
        self.visible( !self.visible() );
    };
}

您想要的下一件事是在项目的visible属性发生变化时封装动画。这意味着你必须以某种方式订阅visible属性并使jQuery做到这一点。

最适合此任务的是custom binding handler动画元素。这也不是太难。我们称之为slideToggle：

ko.bindingHandlers.slideToggle = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var shouldBeVisible = ko.unwrap(valueAccessor());

        // initially, display or hide the element instantly
        $(element)[shouldBeVisible ? "show" : "hide"]();
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var shouldBeVisible = ko.unwrap(valueAccessor());

        // during interactive operation, use transition effect
        $(element)[shouldBeVisible ? "slideDown" : "slideUp"]("fast");
    }
};

我建议您阅读有关自定义绑定处理程序的信息，它们非常有用。

现在我们已将所有活动部件抽象到各自的容器中。让我们使用它们与这个主ViewModel：

function ViewModel() {
    var self = this;

    self.something = ko.observableArray([
        new Something("id1"),
        new Something("id2")
    ]);
}

和这个观点：

<div class="row">
     <div data-bind="foreach: something">
         <div class="col-xs-12" data-bind="slideToggle: visible">
            hidden stuff
         </div>
         <div class="col-xs-1 hidden-menu-trigger-button">
             <div data-bind="click: toggleVisible">Click Me!</div>
        </div>
     </div>
</div>

注意所有内容是如何落实到位的，甚至不需要对元素ID的引用，因为knockout会为您处理上下文。此外，slideToggle动画变得非常容易重复使用，您的视图变得不那么痛苦了。

现场观看：http://jsfiddle.net/nkr9o3un/
以这种方式抽象事物后延伸是多么容易：http://jsfiddle.net/nkr9o3un/2/。尝试使用一堆内联函数来执行此操作。

Answer 2

使用click绑定和id之类的attr：

data-bind="click: function() { $('#' + id()).slideToggle('slow1', null); }"

此处它已展开（()），因为它与'#'连接。

knockout.js变量用作ID

2 个答案: