在 knockout.js 模板上使用表单

Question

我有一个成功接收数据的淘汰模板。我在模板中添加了一个带有文本输入和提交输入的表单，并在文本输入中绑定了一个可观察的视图模型属性。

当将文本输入值绑定到视图模型属性时（传入的数据丢失并且按钮不起作用。我在输入标记之前和之后转储传入的数据，并且数据在第二次转储中消失了.

以下是模板代码sn-p：

<div class="container">
    <div style="width:100%;">
        <div class="panel panel-primary" style="max-width:700px; margin:0 auto;">
            <div class="panel panel-heading" style="text-align:right">
                <a href="/Authentication/Logout" style="text-decoration:none; color:white"><i class="fa fa-sign-out"></i> Logout</a>
            </div>
            <ul class="nav nav-tabs" data-bind="foreach: tabs">
                <li data-bind="css: { active: isSelected }">
                    <a href="#" data-bind="click: $parent.selectedTab"><span data-bind="html: name" /> </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" data-bind="template: { name: getTemplate, data: getTemplateData }"></div>
            </div>
        </div>
    </div>
</div>

<script id="0" type="text/html">
    <br />

    <div class="row" style="margin-left:1px; margin-right:5px; margin-top:10px; margin-bottom:10px;">

        <form>
            <div>
                <pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>
                <input type="text" data-bind="value: $parent.cameraName,  valueUpdate: 'afterkeydown'" placeholder="New Camera Name..." />
                <pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre>
                <input type="submit" data-bind="click: $parent.addCamera" value="ADD" />
            </div>
        </form>

    </div>

    <div data-bind="foreach: $data">
        <div class="rounded-radius-5">
            Name: <span class="spaces" data-bind="text: name"></span> |
            <span class="spaces"></span>
            Job: <span class="spaces" data-bind="text: job"></span> |
            <span class="spaces"></span>
            Status: <span data-bind="style: { color: textColor }"><span class="spaces" data-bind="text: status"></span></span> 
            <div style="text-align:right; float: right"><span class="glyphicon glyphicon-trash"></span></div>
        </div>
    </div>


</script>

以下是 json 转储：

[
  {
    "cameraid": 1,
    "name": "WS-LICAM01",
    "job": "100",
    "status": "CheckedOut",
    "textColor": "#FF0000"
  },
  {
    "cameraid": 2,
    "name": "WS-LICAM02",
    "job": "916",
    "status": "CheckedOut",
    "textColor": "#FF0000"
  },
  {
    "cameraid": 3,
    "name": "WS-LICAM03",
    "job": "956",
    "status": "CheckedOut",
    "textColor": "#FF0000"
  },
  {
    "cameraid": 4,
    "name": "WS-LICAM04",
    "job": "956",
    "status": "CheckedOut",
    "textColor": "#FF0000"
  },
  {
    "cameraid": 5,
    "name": "WS-LICAM05",
    "job": "9999",
    "status": "CheckedOut",
    "textColor": "#FF0000"
  }
]

谁能帮助解决这个问题或让我知道更好的方法？

Answer 1

好吧，我发现了一种在不破坏传入数据的情况下提交表单的丑陋方式。

这是我的新表格：

<script id="0" type="text/html">
    <div class="row" style="margin-left:1px; margin-right:5px; margin-top:10px; margin-bottom:10px;">
        <form data-bind="submit: $parent.addCamera">
            <input type="text" name="tbxCamera" id="tbxCamera" placeholder="New Camera Name..." />
            <button type="submit">ADD</button>
        </form>
    </div>
    <br />
    <div><p><h4>Checked Out</h4></p></div>
    <div style="overflow-y:scroll; height:auto; max-height:160px;">
        <div data-bind="foreach: $data">
            <!-- ko if: checkedOut -->
            <div class="rounded-radius-5">
                Name: <span class="spaces" data-bind="text: name"></span> |
                <span class="spaces"></span>
                Job: <span class="spaces" data-bind="text: job"></span> |
                <span class="spaces"></span>
                Status: <span data-bind="style: { color: textColor }"><span class="spaces" data-bind="text: status"></span></span>
                <div style="text-align:right; float: right"><span class="glyphicon glyphicon-trash"></span></div>
            </div>
            <!-- /ko -->
        </div>
    </div>
    <br />
    <div><p><h4>Checked In</h4></p></div>
    <div style="overflow-y:scroll; height:auto; max-height:160px;">
        <div data-bind="foreach: $data">
            <!-- ko ifnot: checkedOut -->
            <div class="rounded-radius-5">
                Name: <span class="spaces" data-bind="text: name"></span> |
                <span class="spaces"></span>
                Job: <span class="spaces" data-bind="text: job"></span> |
                <span class="spaces"></span>
                Status: <span data-bind="style: { color: textColor }"><span class="spaces" data-bind="text: status"></span></span>
                <div style="text-align:right; float: right"><span class="glyphicon glyphicon-trash"></span></div>
            </div>
            <!-- /ko -->
        </div>
    </div>
</script>

表单中的值在我的 ViewModel 中提取如下：

注意：data[0] 是文本输入，data[1] 是按钮。我只使用文本输入

self.addCamera = function (data, event) {
    var newCamera = [{
        CameraId: 6,
        Name: data[0].value,
        Job: 'N/A',
        Status: 'CheckedIn'
    }];

    self.cameras($.map(newCamera, function (item) {
        return new camera(item);
    }));
};