在嵌套的ul上使用基因敲除数据绑定

Question

我试图在按钮上使用foreach数据绑定。 由于基础拆分按钮，我尝试为每个记录生成的按钮都有自己的选项列表。 问题是内部ul无法访问绑定的正确项目。

我写了一个小例子程序来显示问题：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Try</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/vendor/modernizr.js"></script>
</head>
<body>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>



<h4 class="">persons</h4>
<ul data-bind="foreach: { data: persons, as: 'person' }" class="inline-list">
    <li>
        <a class="small success round button split" data-bind="click: $parent.presentPerson"><h2 data-bind="text: person.name"></h2> <span data-dropdown="drop"></span></a><br>
        <ul id="drop" class="f-dropdown" data-dropdown-content>
            <li><a data-bind="click: $parent.removePerson">Remove</a></li>
        </ul>
    </li>
</ul>

<script type='text/javascript' src='js/knockout-3.4.0rc.js'></script>
<script type="text/javascript">
    // Init foundation
    $(document).foundation();
    // This is a simple *viewmodel* - Java0Script that defines the data and behavior of your UI
    function AppViewModel() {
         var self = this;

        self.persons = ko.observableArray([
            { name: 'Bert', age: 30, hobbies :["music","computers"] },
            { name: 'Charles', age : 31, hobbies :["sports"] },
            { name: 'Denise', age: 32 , hobbies :["art", "fashion", "games"]}
        ]);


        self.removePerson = function() {
            self.persons.remove(this);
        };

        self.presentPerson = function () {
            var person = this;
            window.alert(person.name + " " + person.age);
        };
    }

    // Activates knockout.js
    ko.applyBindings(new AppViewModel());
</script>
</body>
</html>

当单击按钮本身时，人员对象是正确的对象，单击箭头并选择“删除”将导致始终删除最后一个对象而不是所选对象。

Answer 1

删除菜单项似乎是在按钮之间共享的，因此，要知道影响哪个菜单项的方法就是记住最后一次单击。

var lastClicked;

self.removePerson = function () {
    self.persons.remove(lastClicked);
};

self.presentPerson = function () {
    var person = this;
    window.alert(person.name + " " + person.age);
    lastClicked = person;
};

在这里摆弄。

Answer 2

为了避免在所有按钮之间共享一个菜单，您需要为其具有唯一的ID。 在淘汰赛中，我们通常使用$index 。

为了使DOM项目能够在基础初始化时及时出现，我将foundation调用移到了ko.applyBindings之后。 制作一个自定义绑定处理程序，将基础应用于要更新的DOM项或其他内容，可能是一个好主意，但这对于本练习来说已经足够。

 // This is a simple *viewmodel* - Java0Script that defines the data and behavior of your UI function AppViewModel() { var self = this; self.persons = ko.observableArray([{ name: 'Bert', age: 30, hobbies: ["music", "computers"] }, { name: 'Charles', age: 31, hobbies: ["sports"] }, { name: 'Denise', age: 32, hobbies: ["art", "fashion", "games"] }]); self.removePerson = function (data) { console.debug("Remove", data, this); self.persons.remove(this); }; self.presentPerson = function () { var person = this; window.alert(person.name + " " + person.age); }; } // Activates knockout.js ko.applyBindings(new AppViewModel()); // Init foundation $(document).foundation();

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <h4 class="">persons</h4> <ul data-bind="foreach: { data: persons, as: 'person' }" class="inline-list"> <li> <a class="small success round button split" data-bind="click: $parent.presentPerson"><h2 data-bind="text: person.name"></h2> <span data-bind="attr:{'data-dropdown': 'drop'+$index()}"></span></a> <ul data-bind="attr:{id: 'drop'+$index()}" class="f-dropdown" data-dropdown-content> <li><a data-bind="click: $parent.removePerson">Remove</a> </li> </ul> </li> </ul>

在嵌套的ul上使用基因敲除数据绑定

问题描述

2 个解决方案

解决方案1
0 2015-11-15 21:29:24

解决方案2
0 已采纳 2015-11-16 23:01:48

在嵌套的ul上使用基因敲除数据绑定

问题描述

2 个解决方案

解决方案1 0 2015-11-15 21:29:24

解决方案2 0 已采纳 2015-11-16 23:01:48

解决方案1
0 2015-11-15 21:29:24

解决方案2
0 已采纳 2015-11-16 23:01:48