Question

我一直在关注一些教程并尝试关注var data = [ new ListData("Programmer", 1), new ListData("Testing", 2), new ListData("DBA", 3), new ListData("Lead", 4), new ListData("Manager", 5) ]; function ListData(desig, id) { return { Desig: ko.observable(desig), Id: ko.observable(id) }; } var viewModel = { list: ko.observableArray(data), dataToAdd: ko.observable(""), selectedData: ko.observable(null), addTag: function () { this.list.push({ Desig: this.dataToAdd() }); this.tagToAdd(""); }, selecData: function () { viewModel.selectedData(this); } }; $(document).on("click", ".editData", function () { }); ko.applyBindings(viewModel);。我无法编辑新添加的任何数据。

我的JS代码：

    <input type="text" data-bind="value:   dataToAdd" />
    <button data-bind="click: addData">
        + Add
    </button>
    <ul data-bind="foreach: list">
        <li data-bind="click: $parent.selecData">
            <span data-bind="text: Desig"></span>
            <div>
                <a href="#" class="editData">Edit</a> 
            </div>
        </li>
    </ul>
<div id="EditData" data-bind="with: selectedData">
    Designation:
    <input type="text" data-bind="value: Desig" />
</div>

我的观看代码：

<link rel="stylesheet" href="main/main.css">
<md-content layout="row">
<md-content>
    <md-sidenav style="height: 100%" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="true">
            <md-toolbar style="min-height: 1px; height: 50px" class="md-theme-indigo">
                <h3 class="md-toolbar-tools">Your Library</h3>
            </md-toolbar>
            <md-content layout="column" layout-padding flex>
                <md-list>
                    <md-list-item class="md-1-line">
                       <md-button class="md-primary md-hue-1" ng-click="showSongs()">Songs</md-button>
                    </md-list-item>
                    <md-list-item class="md-1-line">
                       <md-button class="md-primary md-hue-1" ng-click="getArtists()">Artists</md-button>
                   </md-list-item>
                    <md-list-item class="md-1-line">
                       <md-button class="md-primary md-hue-1" ng-click="getAlbums()">Albums</md-button>
                   </md-list-item>
                    <md-list-item class="md-1-line">
                       <md-button class="md-primary md-hue-1">Playlists</md-button>
                    </md-list-item>
                   <md-divider ></md-divider>
                    <md-list-item class="md-1-line">
                       <md-button class="md-primary md-hue-1">Upload</md-button>
                    </md-list-item>
                    <md-list-item class="md-1-line">
                       <md-button class="md-primary md-hue-1">Download</md-button>
                    </md-list-item>
                </md-list>
            </md-content>
    </md-sidenav>
</md-content>
<md-content layout="column" layout-padding flex>
    <md-content ng-show="showSongsList">
        <div ng-include="'main/songsList.html'"></div>
    </md-content>
    <md-content ng-show="showArtists">
        <div ng-include="artistsTemplate.url"></div>
    </md-content>
    <md-content ng-show="showAlbums">
        <div ng-include="albumsTemplate.url"></div>
    </md-content>
</md-content>
</md-content>
<md-content ng-include="'navBar.html'"></md-content>
<md-content ng-include="'navBarBottom.html'"></md-content>

我能够编辑已经存在的数据，例如 - Programmer，Testing，DBA ......但是如果我添加新数据......我无法编辑。请协助。

Answer 1

您的addData（您在代码中将其命名为addTag，但在HTML中调用addData功能并不像初始数据创建那样构建新元素。注意：由于您的ListData构造函数显式返回一个对象，new是多余的。

addData: function () {
    this.list.push(ListData(this.dataToAdd(), ""));
},

编辑不适用于新添加的数据 - 淘汰赛

1 个答案: