如何使用knockoutJS添加和更新记录

时间:2013-11-19 07:47:41

标签: knockout.js

我想使用knockout js添加和更新表单数据。但是,当想要添加新项目时,我无法获得该值,也无法获得编辑项目的更改。贝娄是我的代码示例:

<form class="form-horizontal" id="formEditProperty" data-bind='if: Profile'>
    Edit Expense Type
    <div class="control-group">
        <label class="control-label" for="inputID">ID</label>
        <div class="controls">
            <label  data-bind="text: Profile().ID" title="ID" />
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputName">Name</label>
        <div class="controls">
            <input type="text" data-bind="value: Profile().Name" placeholder="Name" />
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <button class="btn btn-mini btn-primary" data-bind="click:$root.updateProfile">Save</button>
            <button class="btn btn-mini btn-danger" data-bind="click:$root.Cancel">Cancel</button>
        </div>
    </div>
</form>

self.updateProfile = function () {
    $.ajax({
        type: "POST",
        url: "/Home/SavePropertyInformation",
        data: JSON.stringify(self.Profile(), null, 2),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            self.Profiles.removeAll();
            self.Profiles(data); //Put the response in ObservableArray
            self.Profile(null);
            $("#propertyList").show();
            $("#formAddProperty").hide();
            $("#formEditProperty").hide();
            $("#divBtnAddProperty").show();
          //  $("<div></div>").html("Data has been saved successfully.").dialog({ modal: true, title: "Info", buttons: { "Ok": function () { $(this).dialog("close"); } } }).show();
        },
        error: function (err) {
            var error = JSON.parse(err.responseText);
            $("<div></div>").html(error.Message).dialog({ modal: true, title: "Error", buttons: { "Ok": function () { $(this).dialog("close"); } } }).show();
        },
        complete: function () {
            //closeWaitingDialog();
        }
    });

我是淘汰赛中的新手。任何建议都非常适合。

2 个答案:

答案 0 :(得分:1)

答案 1 :(得分:0)

您可以尝试使用此代码。 我刚刚使用绑定(with binding)添加了上部div,并根据规则

应用了您的子实体
<div data-bind="with : Profile">
    <div class="control-group">
        <label class="control-label" for="inputID">
            ID</label>
        <div class="controls">
            <label data-bind="text: ID" title="ID" />
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputName">
            Name</label>
        <div class="controls">
            <input type="text" data-bind="value: Name" placeholder="Name" />
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <button class="btn btn-mini btn-primary" data-bind="click:$root.updateProfile">
                Save</button>
            <button class="btn btn-mini btn-danger" data-bind="click:$root.Cancel">
                Cancel</button>
        </div>
    </div>
</div>