编辑，删除和下拉显示正确的字段淘汰js

Posted 2023-03-27

【中文标题】编辑，删除和下拉显示正确的字段淘汰js

【英文标题】：edit, delete and drop down displaying correct field knockout js

【发布时间】：2016-03-20 22:00:52

【问题描述】：

所以我有一个淘汰赛 js 模板，它显示这样的字段 ，可以编辑、删除和添加新行。 因此，当我在 Instantor 中单击编辑时，它会显示“选择公司”，而不是给我作为 Instantor 进行编辑的第一个选项。 最后，当我尝试添加一个新项目时，它没有显示选择公司它只是首先给出了 Instantor 的选项，而不是像这样显示的“选择公司”。

所以我要解决的是，在编辑时它应该显示 Instantor 而不是选择公司，当我添加新项目时它应该显示选择公司而不是复制顶部字段。

这是模板的代码。

 <script id="RRitemTmpl" type="text/html">
    <tr>           
        <td class="" data-bind="text: Company"></td>
        <td class="text-center" data-bind="text: third_party_rr_value"></td>
        <td class="text-center" style="vertical-align:middle;">
            <div data-bind="if: status() > 0">
                <button type="button" class="btn btn-default btn-xs" data-bind="click: $parent.editItem">Edit</button>
                <button type="button" class="btn btn-default btn-xs" data-bind="click: $parent.deleteItem">Delete</button>
            </div>
            <div data-bind="if: status() < 1">
                <span data-bind="text: status_description"></span>
            </div>
        </td>
    </tr>
</script>

<script id="RReditTmpl" type="text/html">
    <tr>
      <td class="text-center">
            <select id="selected_currency_local" class="form-control input-sm" data-bind="options: $root.availableCompanies,
                    optionsText: 'text_value',
                    value: $parent.selectedCompanyLocal,
                    optionsCaption: 'Choose Company'">
            </select>
        </td> 
        <td class="text-center">
            <input type="text" class="form-control input-sm text-left" data-bind="value: third_party_rr_value" />
        </td>

        <td class="text-center" style="vertical-align:middle;">
            <button type="button" class="btn btn-default btn-xs" data-bind="click: $parent.acceptItemEdit">Accept</button>
            <button type="button" class="btn btn-default btn-xs" data-bind="click: $parent.cancelItemEdit">Cancel</button>
        </td>

    </tr>
</script>

如果有必要，我提供js文件代码。

var ThirdPartyRRViewModel = function(parent, items) 

        var root = parent;
        var self = this;

        this.items = ko.observableArray(items);

        this.selectedItem = ko.observable();

        /*Observable for storing the data of the company selected */
        self.selectedCompanyLocal = ko.observable();

        this.addItem = function() 


             $.each(root.availableCompanies(), function (index, companyItem) 
                if (companyItem.ID == root.userRiskRate().Company) 
                    self.selectedCompanyLocal(companyItem);
                
            );

            var newThird = "ID":0, "ORIG_ID":0, "Company":self.selectedCompanyLocal().text_value, 
                            "third_party_rr_value":0, 
                            "status":1, "status_description":"Active";

            var newItem = new ThirdPartyItem(newThird);
            self.items.push(newItem);
            self.selectedItem(newItem);
        ;

        this.deleteItem = function(itemToDelete) 
            /* If ORIG_ID is greater than > 0, useropenloan row has been read from the database 
               and can not be removed, but cancelled. */
            if (itemToDelete.ORIG_ID() > 0) 
                itemToDelete.status(-1); /* Indicates to server that this item should be updated to cancelled. */ 
                itemToDelete.status_description('Will be cancelled');
                itemToDelete.itemIsEdited(1);
             else 
                 self.items.remove(itemToDelete);
            
            self.selectedItem(null);
        ;

        this.editItem = function(ThirdPartyItem) 
            $.each(root.availableCompanies(), function (index, companyItem) 
                if (companyItem.ID == ThirdPartyItem.Company()) 
                    self.selectedCompanyLocal(companyItem);
                
            );
            self.selectedItem(ThirdPartyItem);
        ;

        this.acceptItemEdit = function() 
            self.selectedItem().third_party_rr_type(self.selectedCompanyLocal().text_code);  
            self.selectedItem().Company(self.selectedCompanyLocal().text_value);  
            self.selectedItem().third_party_rr_type.commit();
            self.selectedItem().Company.commit();
            self.selectedItem().third_party_rr_value.commit();
            self.selectedItem().itemIsEdited(1);
            self.selectedItem(null);
            self.selectedCompanyLocal(null);
        ;

        this.cancelItemEdit = function() 
            self.selectedItem().Company.reset();
            self.selectedItem().third_party_rr_value.reset();
            self.selectedItem(null);
            self.selectedCompanyLocal(null);
        ;

        this.templateToUse = function(item) 
            return self.selectedItem() === item ? "RReditTmpl" : "RRitemTmpl";
        ;
    ;

【问题讨论】：

我假设数据绑定是错误的。如果您将： value: $parent.selectedCompanyLocal 更改为 value: $data.selectedCompanyLocal 会发生什么？

@Kris 当我将其更改为您所说的内容时，现在添加的新项目显示为 Company ！ :D 谢谢一个问题得到了解决，现在唯一的问题是当你点击编辑它显示选择公司而不是instantor

能否确认Add时选中的项与Edit时相同？

@Kris 好的，当我将其更改为数据时，它不会保存其他选项，它只保存 Instantor，所以我猜它错了..

@Kris 是的，当它的 $parent 时，我添加的是我将编辑的内容，但是当我添加 Instantor 时，我可以将其编辑为其他任何内容，还有更多选项，但它没有显示选择公司..

【参考方案1】：

在代码中将"Company":self.selectedCompanyLocal().text_value改为"Company":self.selectedCompanyLocal() 它应该可以工作。

【讨论】：

是的，谢谢！就是这样，我后来想通了。