knockout.js - 从弹出窗口将项目添加到可观察数组

Question

我一直在玩 Knockout，但我不知道如何处理这种情况。

基本上我有一个员工列表，您可以从选择控件中为该员工选择一个职位。我使用 jquery 创建了一个小弹出窗口，以便用户可以添加新位置。然后这将更新基础页面中的选择。我可以调用 viewmodel 的 addPosition 方法，它添加了一个带有一些测试数据的新位置，但我无法理解如何从弹出窗口的文本字段中的值填充它。

这是我的 fiddle

http://jsfiddle.net/ricobano/HA5uz/3/

<div id="employeeWrapper">
    <div data-bind="foreach: employees">
        <div>
            <label>Full Name</label>
            <input type="text" data-bind="value: fullName" />
            <label>Position</label>
            <select id="slTest" data-bind="options: $root.Positions, value:position, optionsText:'name'"></select>
            <label>Salary:</label><span data-bind="text: position().formatted"></span>
        </div>
    </div>
    <button id="button"  data-bind="click: addEmployee">Add Employee</button>
    <button id="AddPosition" data-bind="click: open">Add Position</button>
</div>

<div data-bind="dialog: {autoOpen: false, title: 'Dialog test' },  dialogVisible: isOpen">
    <div>
        <label>Name:</label><input type="text"/>
    </div>
    <div>
        <label>salary:</label><input type="text"/>
    </div>
    <button data-bind="click: addPosition">Add</button>
 </div>

这是我的 View 模型

ko.bindingHandlers.dialog = {
    init:function(element, valueAccessor, allBindingsAccessor){
        var options = ko.utils.unwrapObservable(valueAccessor()) || {};
        setTimeout(function() { 
                options.close = function() {
                    allBindingsAccessor().dialogVisible(false);                        
                };

                $(element).dialog(options);     
            }, 0); 
    },
     update: function(element, valueAccessor, allBindingsAccessor) {
            var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible),
                $el = $(element),
                dialog = $el.data("uiDialog") || $el.data("dialog")

            //don't call open/close before initilization
            if (dialog) {
                $el.dialog(shouldBeOpen ? "open" : "close");
            }  
        }
};

function Employee(fullname, position) {
    var self = this;
    self.fullName = ko.observable(fullname);
    self.position = ko.observable(position);
};

function Position(data) {
    var self = this;
    self.id = ko.observable(data.id);
    self.name = ko.observable(data.name);
    self.salary = ko.observable(data.salary);

    self.formatted = ko.computed(function(){
        return "£" + self.salary();
    });
};

function EmployeeVM() {
    var self = this;
    self.employees = ko.observableArray();
    self.Positions = ko.observableArray([]);
    self.isOpen = ko.observable(false);

    var PositionsJSON = {
        json: $.toJSON([{
            "id": 1,
            "name" : "No position",
            "salary" : 0
        },{
            "id": 2,
            "name" : "Web Developer",
            "salary" : 15000           
        },{
            "id": 3,
            "name" : "Manager",
            "salary" : 30000           
        }])
    };

    var data = {
        json: $.toJSON([{
            "fullName": "Richard Banks",
                "position": {
                    "id": 2
            }
        }, {
            "fullName": "Dave Grohl",
                "position": {
                    "id": 3
            }
        }, {
            "fullName": "bobby rahul",
                "position": {
                    "id": 3
            }
        }])
    };

    $.when(
        $.ajax({
            url: "/echo/json/",
            data: PositionsJSON,
            type: "POST"
        }),
        $.ajax({
            url: "/echo/json/",
            data: data,
            type: "POST"
        })
    ).done(function(positionArgs, EmployeeArgs){
        var ps = $.map(positionArgs[0], function(item){
            return new Position(item);
        });

        self.Positions(ps);

        $.each(EmployeeArgs[0], function (i, item) {
            var p = ko.utils.arrayFirst(self.Positions(), function(p){
                return p.id() == item.position.id;
            });

            var e = new Employee(item.fullName, p);
            self.employees.push(e);
        });
    });

    self.addPosition = function(){
        self.Positions.push(new Position({id:"4", name:"Director", salary:"To much"}));
        self.isOpen(false);
    };

    self.addEmployee = function(){
        self.employees.push(new Employee("", self.Positions[0]));
    };

    self.open = function(){
        self.isOpen(true);
    };
}

ko.applyBindings(new EmployeeVM());

Answer 1

理查德，你快完成了。

使用空白位置模型并将其绑定(bind)到对话框中的输入。 (每次打开对话框时，一定要清空该模型的值。)

function EmployeeVM() {
    var self = this;
    ...
    self.dialogPosition = new Position({id:'',name:'',salary:''})
};

(绑定(bind)...)

<div data-bind="dialog: {autoOpen: false, title: 'Dialog test' },  dialogVisible: isOpen">
    <!-- ko with: dialogPosition -->
    <div>
        <label>Name:</label><input type="text" data-bind="value:name"/>
    </div>
    <div>
        <label>salary:</label><input type="text" data-bind="value:salary"/>
    </div>
    <!-- /ko -->
    <button data-bind="click: addPosition">Add</button>
 </div>

当对话框通过“添加”按钮关闭时，复制该 Position 对象并将该副本推送到您的 self.Positions() 可观察数组。这将自动更新您的选择。

self.addPosition = function(){
    var newPosition = new Position({id:'',name:self.dialogPosition.name(),salary:self.dialogPosition.salary()});
    self.Positions.push(newPosition);
    self.isOpen(false);
}

我已经更新了你的 fiddle (没有清除对话位)http://jsfiddle.net/HA5uz/5/

希望对您有所帮助!