0

データのテーブルに含まれる監視可能な配列に要素をプログラムで追加できないという問題があります。

テーブルの各行には、影響を与えたい異なる配列があります。

HTML は次のようになります。

<div class='liveExample'>     
<h2>Cases</h2>
<div id='contactsList'>
    <table class='contactsEditor'>
        <tr>
            <th>Case Number</th>
            <th>Stage</th>
            <th>Users</th>
            <th>Ids</th>
        </tr>
        <tbody data-bind="foreach: appearances ">
            <tr>
                <td>
                    <input data-bind='value: caseNumber' />
                </td>
                <td><input data-bind='value: caseStage' /></td>
                <td> 
                    <ul  data-bind="foreach: subjects">
                        <li style="list-style-type:none;"><label data-bind="text: Name"/></li>    
                    </ul>   
                </td>
                <td>
                    <table>
                        <tbody data-bind="foreach: ids">
                            <tr>
                                <td><input data-bind='value: $data' /></td>
                                <td><a href='#' data-bind='click: $root.removeId'>Delete</a></td>
                            </tr>
                        </tbody>
                    </table>
                    <a href='#' data-bind='click: $root.addId'>Add number</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>     
<p>
    <button data-bind='click: save, enable:appearances().length > 0'>Save to JSON</button>
</p>     
<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'> </textarea>

</p>

データと JavaScript は次のようになります。

enter code here
var initialData = [{
"Number": "12000009",
"Stage": "Inital",
"Subjects": [{
    "Name": "Andrew McAdam"},
{
    "Name": "Patrick Brown"}],
"Ids": [1]},
{
"Number": "12000010",
"Stage": "Inital",
"Subjects": [{
    "Name": "John Smith"}],
"Ids": [2, 3]},
{
"Number": "12000011",
"Stage": "Inital",
"Subjects": [{
    "Name": "James Bonner"}],
"Ids": [4]},
{
"Number": "12000012",
"Stage": "Processed",
"Subjects": [{
    "Name": "Henrik Dalgleish"}],
"Ids": [5]}]

var AppearancesModel = function(appearances) {
var self = this;
self.appearances = ko.observableArray(ko.utils.arrayMap(appearances, function(appearance) {
    return {
        caseNumber: appearance.Number,
        caseStage: appearance.Stage,
        subjects: ko.observableArray(appearance.Subjects),
        ids: ko.observableArray(appearance.Ids)
    };
}));

self.addId = function(appearance) {
    appearance.ids.push("");
};

self.removeId = function(id) {
    $.each(self.appearances(), function() {
        this.ids.remove(id)
    })
};

self.save = function() {
    self.lastSavedJson(JSON.stringify(ko.toJS(self.appearances), null, 2));
};

self.lastSavedJson = ko.observable("")
}

ko.applyBindings(new AppearancesModel(initialData));​

私が抱えている問題は、[追加] ボタンをクリックして値を入力した後、配列の値が空の文字列 (新しい配列要素を作成するときに追加した値) になることです。

問題は、値を取得する前に新しい項目を配列に追加していることだと思いますが、新しい入力にバインドされると思ったので、保存関数を実行すると新しい値が反映されます。

上記の JsFiddle はhttp://jsfiddle.net/amcgoldrick/3h9GZ/にあります。

ありがとう

アンディ

4

1 に答える 1

3

に追加する値ids observableArrayは観察できないため、バインディングは一方向にすぎません。内の値を更新する場合は、オブザーバブルobservableArray内の要素を作成する必要があります。observableArray

したがって、代わりに：

self.addId = function(appearance) {
    appearance.ids.push("");
};

次のようになります。

self.addId = function(appearance) {
    appearance.ids.push({id: ko.observable("")});
};

実際の例については、 http://jsfiddle.net/5wKjk/3/を参照してください。(関係する原則を実証したかっただけで、時間がなかったので、既存の ID をマップするためのコードは追加していません)。

于 2012-07-31T10:41:37.800 に答える