淘汰赛映射和foreach数据绑定上表按钮，缺少参照视图模型？ [英] Knockout mapping and foreach data-bind on table with buttons, missing reference to viewmodel?

问题描述

我用mvc4和的EntityFramework结合淘汰赛。我也用淘汰赛的映射。但是，我遇到一个问题至极我不能得到解决。

我想实现什么：

• 用户点击删除按钮从表中删除一行。 [作品]


• 调用的MVC控制器上的删除操作方法actualy删除的数据
  数据库。 [作品]


• 包含新的数据发送回新的JSON对象改变
  表。 [作品]


• 加载新的数据在我的淘汰赛视图模型，并使用 ko.mapping.fromJS（）和ko.applyBindings（）更新UI的 [不
  的工作，我真的失去了这里]

它看起来像我完全以失去了参考我的经验名单至极我使用数据绑定和foreach我的表。我认为这与我打电话给我的deletemethod从foreach循环内的方式做。

它也像JavaScript的'绝招'使用var 自=这一点; does not工作让我参考了正确的数据。

下面我如下code我用，现在给你的情况都更好的主意。如果需要了解更多信息，请让我知道。

这是我的MVC的ViewModels：

 公共类ExperienceOverviewModel
{
        公共ExperienceModel selectedExperience {搞定;组; }
        公开名单＆LT; ExperienceModel＆GT;体验{搞定;组; }
}公共类ExperienceModel
{
        公众诠释ExperienceId {搞定;组; }
        公众的DateTime DateFrom {搞定;组; }
        公众的DateTime DateUntil {搞定;组; }
        公共字符串描述{搞定;组; }
        公共字符串雇主{搞定;组; }
        公共十进制小时{搞定;组; }
        公众诠释PERSONID {搞定;组; }
        公共BOOL？借调{搞定;组; }
        公共字符串名称{搞定;组; }
}
 

这是我的表，我的foreach使用数据绑定淘汰赛经验：

 ＆LT; /表＆gt;
    ＆LT;＆THEAD GT;
        ＆LT; / THEAD＆GT;
    ＆LT; TBODY数据绑定=的foreach：经验（）＆GT;
            ＆所述; TR＆GT;
                ＆LT; TD数据绑定=TEXT：雇主＆GT;＆LT; / TD＆GT;
                ＆LT; TD数据绑定=TEXT：描述＆GT;＆LT; / TD＆GT;
                ＆LT; TD数据绑定=TEXT：DateFrom＆GT;＆LT; / TD＆GT;
                ＆LT; TD数据绑定=TEXT：DateUntil＆GT;＆LT; / TD＆GT;
                ＆LT; TD数据绑定=TEXT：借调＆GT;＆LT; / TD＆GT;
                ＆所述; TD＆GT;
                    ＆LT; A HREF =＃数据绑定=点击：功能（数据，事件）{$ root.EditExperienceModal（数据）;}GT / I＆;＆GT;＆LT; I类=图标编辑＆GT;＆LT ;＆所述; / A＆GT;
                ＆LT; / TD＆GT;
                ＆所述; TD＆GT;
                    ＆LT; A HREF =＃数据绑定=点击：功能（数据，事件）{$ root.ConfirmDeleteExperienceModal（数据）;}GT / I＆;＆GT;＆LT; I类=图标删除＆GT;＆LT ;＆所述; / A＆GT;
                ＆LT; / TD＆GT;
            ＆LT; / TR＆GT;
        ＆LT; / TBODY＆GT;
    ＆LT; /表＆gt;
 

我淘汰赛视图模型，我想打电话给ko.mapping.fromJS（）和ko.applyBindings（）......这里有云FUBAR ....

 功能视图模型（）{
            this.DeleteExperience =功能（经验）{                $阿贾克斯（{
                    类型：后，
                    的contentType：应用/ JSON
                    网址：/经验/删除/+ this.selectedExperience.ExperienceId（）
                    数据：ko.toJSON（self.selectedExperience）
                    错误：功能（XHR，状态，错误）{
                    }，
                    成功：函数（响应）{                        ko.mapping.fromJS（响应，?? this.Experiences？）; ＆LT; ----？
                        ko.applyBindings（?????）; ＆LT; ----？                    }
                }）;
            }
        }        $（函数（）{
            VAR jsonModel ='@ Html.Raw（Newtonsoft.Json.JsonConvert.SerializeObject（this.Model，新Newtonsoft.Json.Converters.IsoDateTimeConverter（）））;
            VAR mvcModel = ko.mapping.fromJSON（jsonModel）;            VAR myViewModel =新视图模型（）;
            G = ko.mapping.fromJS（myViewModel，mvcModel）;
            ko.applyBindings（G）;
        }）;
 

的* - 更新 - * 的

要在这里澄清更多的是我所simplyfied：
当我得到的结果从AJAX调用回我得到以下错误：

  

对象＃没有方法'经验'

 ＆LT;表类=表的表条纹＆GT;
    ＆LT; TBODY数据绑定=的foreach：经验（）＆GT;
        ＆所述; TR＆GT;
            ＆LT; TD数据绑定=TEXT：雇主＆GT;＆LT; / TD＆GT;
            ＆LT; TD数据绑定=TEXT：描述＆GT;＆LT; / TD＆GT;
            ＆LT; TD数据绑定=TEXT：DateFrom＆GT;＆LT; / TD＆GT;
            ＆LT; TD数据绑定=TEXT：DateUntill＆GT;＆LT; / TD＆GT;
            ＆LT; TD数据绑定=TEXT：借调＆GT;＆LT; / TD＆GT;
            ＆所述; TD＆GT;
               ＆LT; A HREF =＃数据绑定=点击：$ root.DeleteExperience＆GT;＆LT; I类=图标删除＆GT;＆LT; I＆GT /;＆LT; / A＆GT;            ＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
    ＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT;脚本类型=文/ JavaScript的＆GT;    功能视图模型（）{
        VAR自我=这一点;        self.DeleteExperience =功能（经验）{
            $阿贾克斯（{
                类型：后，
                的contentType：应用/ JSON
                网址：/经验/删除/+ experience.ExperienceId（）
                数据：ko.toJSON（经验），
                错误：功能（XHR，状态，错误）{
                    的console.log（错误）;
                }，
                成功：函数（响应）{
                    $（'＃confirmDeleteModal'）模态（隐藏）。
                    self.UpdateExperienceList（响应）;
                }
            }）;
        }        self.UpdateExperienceList =功能（数据）{
            self.Experiences（数据）; ＆LT; ---- ?????
        }
    }    $（函数（）{
        VAR jsonModel ='@ Html.Raw（Newtonsoft.Json.JsonConvert.SerializeObject（this.Model，新Newtonsoft.Json.Converters.IsoDateTimeConverter（）））;
        VAR mvcModel = ko.mapping.fromJSON（jsonModel）;
        VAR myViewModel =新视图模型（）;
        G = ko.mapping.fromJS（myViewModel，mvcModel）;
        ko.applyBindings（G）;
    }）;
＆LT; / SCRIPT＆GT;
 

解决方案

在你的 self.UpdateExperienceList 功能，请尝试以下操作：

  self.UpdateExperienceList =功能（数据）{
    ko.mapping.fromJSON（数据，{}，个体经营）;
};
 

这将更新上的自我的基础上，从服务器的数据对象。

属性

您的视图模型的创立初期看起来也我错了。我会虽然你想要的东西更像如下：

  VAR myViewModel = ko.mapping.fromJSON（jsonModel，{}，新视图模型（））;
 

I use mvc4 and entityframework in combination with knockout. I also use knockout mapping. But I run into a problem wich I cannot get solved.

What I want to achieve:

• User clicks on delete button to delete row from table. [Works]
• Call the delete action method on the mvc controller to actualy delete the data from the database. [Works]
• Send back new Json object containing the data of the new changed table. [Works]
• Load the new data in my knockout viewmodel and update the UI using ko.mapping.fromJS() and ko.applyBindings() [Does not work and I am realy lost here]

It looks like I totaly lost the reference to my list of Experiences wich I use to databind and foreach my table with. And I think it has to do with the way I call my deletemethod from within the foreach loop.

It also looks like the javascript 'trick' with var self = this; doesnt work to get my reference to the correct data.

Here follows my code I use for now to give you all a better idea of the situation. If more information is needed please let me know.

These are my mvc viewmodels:

public class ExperienceOverviewModel
{
        public ExperienceModel selectedExperience { get; set; }
        public List<ExperienceModel> Experiences { get; set; }
}

public class ExperienceModel
{
        public int ExperienceId { get; set; }
        public DateTime DateFrom { get; set; }
        public DateTime DateUntil { get; set; }
        public string Description { get; set; }
        public string Employer { get; set; }
        public decimal Hours { get; set; }
        public int PersonId { get; set; }
        public bool? Secondment { get; set; }
        public string Title { get; set; }
}

This is my table where I foreach databind the experiences using knockout:

</table>
    <thead>
        </thead> 
    <tbody data-bind="foreach: Experiences()">
            <tr>
                <td data-bind="text: Employer"></td>
                <td data-bind="text: Description"></td>
                <td data-bind="text: DateFrom"></td>
                <td data-bind="text: DateUntil"></td>
                <td data-bind="text: Secondment"></td>
                <td>
                    <a href="#" data-bind="click: function(data, event){ $root.EditExperienceModal(data); }"><i class="icon-edit"></i></a>
                </td>
                <td>
                    <a href="#" data-bind="click: function(data, event){ $root.ConfirmDeleteExperienceModal(data);}"><i class="icon-remove"></i></a>
                </td>
            </tr>
        </tbody>
    </table>

My knockout viewmodel where I want to call ko.mapping.fromJS() and ko.applyBindings()... Here it goes fubar....

    function ViewModel() {
            this.DeleteExperience = function (experience) {

                $.ajax({
                    type: "post",
                    contentType: "application/json",
                    url: "/Experienced/Delete/" + this.selectedExperience.ExperienceId(),
                    data: ko.toJSON(self.selectedExperience),
                    error: function (xhr, status, error) {
                    },
                    success: function (response) {

                        ko.mapping.fromJS(response, ?? this.Experiences ??);  <---- ???
                        ko.applyBindings(?????);                              <---- ???

                    }
                });
            }
        }

        $(function () {
            var jsonModel = '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model, new Newtonsoft.Json.Converters.IsoDateTimeConverter()))';
            var mvcModel = ko.mapping.fromJSON(jsonModel);

            var myViewModel = new ViewModel();
            g = ko.mapping.fromJS(myViewModel, mvcModel);
            ko.applyBindings(g);
        });

* -- UPDATED -- *

To clarify more here is what I have simplyfied: When I get the results back from the AJAX call I get the following error:

Object # has no method 'Experiences'

<table class="table table-striped">
    <tbody data-bind="foreach: Experiences()">
        <tr>
            <td data-bind="text: Employer"></td>
            <td data-bind="text: Description"></td>
            <td data-bind="text: DateFrom"></td>
            <td data-bind="text: DateUntill"></td>
            <td data-bind="text: Secondment"></td>
            <td>
               <a href="#" data-bind="click: $root.DeleteExperience"><i class="icon-remove"></i></a>

            </td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">

    function ViewModel() {
        var self = this;

        self.DeleteExperience = function (experience) {
            $.ajax({
                type: "post",
                contentType: "application/json",
                url: "/Experienced/Delete/" + experience.ExperienceId(),
                data: ko.toJSON(experience),
                error: function (xhr, status, error) {
                    console.log(error);
                },
                success: function (response) {
                    $('#confirmDeleteModal').modal('hide');
                    self.UpdateExperienceList(response);
                }
            });
        }

        self.UpdateExperienceList = function (data) {
            self.Experiences(data);       <---- ?????
        }
    }

    $(function () {
        var jsonModel = '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model, new Newtonsoft.Json.Converters.IsoDateTimeConverter()))';
        var mvcModel = ko.mapping.fromJSON(jsonModel);
        var myViewModel = new ViewModel();
        g = ko.mapping.fromJS(myViewModel, mvcModel);
        ko.applyBindings(g);
    });
</script>

解决方案

In your self.UpdateExperienceList function, try the following:

self.UpdateExperienceList = function(data) {
    ko.mapping.fromJSON(data, {}, self);
};

This will update the properties on the self object based on the data from the server.

Your initial creation of the view model also looks wrong to me. I would have though you wanted something more like the below:

var myViewModel = ko.mapping.fromJSON(jsonModel, {}, new ViewModel());

这篇关于淘汰赛映射和foreach数据绑定上表按钮，缺少参照视图模型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！