在嵌套的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