Question

我是淘汰赛的新手。我已经拥有了这个fiddle：

将左侧框填充为项目列表
在左框中选择一个项目后，它会在右侧框中显示详细项目

似乎我让它正常运行。但我希望增加更多内容。

加载后，选择第一个foo及其显示的详细信息
点击save链接后，它会添加新的foo并突出显示，然后会出现右侧框中的编辑器，然后点击var data = [ { id: 1, name: "foo1", is_active: true }, { id: 2, name: "foo2", is_active: true }, { id: 3, name: "foo3", is_active: true }, { id: 4, name: "foo4", is_active: false }, ]; var FooBar = function (selected) { this.id = ko.observable(""); this.name = ko.observable(""); this.is_active = ko.observable(true); this.status_text = ko.computed(function () { return this.is_active() === true ? "Active" : "Inactive"; }, this); this.is_selected = ko.computed(function () { return selected() === this; }, this); }; var vm = (function () { var foo_bars = ko.observableArray([]), selected_foo = ko.observable(), load = function () { for (var i = 0; i < data.length; i++) { foo_bars.push(new FooBar(selected_foo) .name(data[i].name) .is_active(data[i].is_active) .id(data[i].id)); } }, select_foo = function (item) { selected_foo(item); }, add_foo = function () { // I have tried this but ain't working at all. Please help // foo_bars.push(new FooBar(selected_foo)); }; return { foo_bars: foo_bars, load: load, selected_foo: selected_foo, select_foo: select_foo, add_foo: add_foo }; }()); vm.load(); ko.applyBindings(vm);它会将其添加到foo的集合中

这可能吗？

下面的代码段

＆＃13;

.box {
    float: left;
    width: 250px;
    height: 250px;
    border: 1px solid #ccc;
}

.selected {
    background-color: #ffa !important;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="box">
    <a href="#" data-bind="click: add_foo">+ Add foo</a>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: foo_bars">
            <tr data-bind="click: $root.select_foo, css: { selected: is_selected }">
                <td><a href="#" data-bind="text: $data.name"></a></td>
                <td data-bind="text: $data.status_text"></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="box" data-bind="with: selected_foo">
    Id: <span data-bind="text: id"></span><br />
    Name: <input type="text" data-bind="value: name" /><br />
    Status: <input type="checkbox" data-bind="checked: is_active"> <span data-bind="text: status_text"></span><br />
    <button>Save</button>
</div>

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    e.preventDefault();
    var name = $("#first_name").val();
    var last_name = $("#last_name").val();
    var city_name = $("#city_name").val();
    var dataString = 'first_name='+name+'&last_name='+last_name+'&city_name='+city_name;
    $.ajax({
        data:dataString,
        url:'index.php',
        success:function(data) {
            alert(data);
        }
    });
});
</script>

＆＃13;

Answer 1

您要添加的新对象没有分配名称和ID，这可能就是它没有显示的原因。除此之外，添加新对象后，您需要先选择它，然后才能在左侧面板中显示为已选中。下面是我的添加方法的代码定义

add_foo = function() {
    var new_foo=new FooBar(selected_foo)
        .name("foo"+(foo_bars().length+1));
    select_foo(new_foo);
    foo_bars.push(new_foo);
};

可以在http://jsfiddle.net/euq48em4/1/

找到完整的工作小提琴

Answer 2

演示：http://jsfiddle.net/wguhqn86/4/

load = function () {
    for(var i = 0; i < data.length; i++){
        foo_bars.push(new FooBar(selected_foo)
              .name(data[i].name)
              .is_active(data[i].is_active)
              .id(data[i].id)
        );
    }
    selected_foo(foo_bars()[0]); // default select first foo
},


add_foo = function() {
    var count = foo_bars().length + 1;
    var newItem = new FooBar(selected_foo).name('')
                .is_active(true)
                .id(count)
    foo_bars.push(newItem);
    selected_foo(newItem);
};

如何将选定的observable附加到新添加的项目？

2 个答案: