Question

我有这个可观察对象，里面有两个可观察的属性：

self.matchModel = ko.observable();

模型如下所示：

function toKnockOutObservable(data) {
    return {
        Id: data.Id,
        TeamId: data.TeamId,
        TeamName: data.TeamName,
        OpponentName: data.OpponentName,
        LocationName: data.LocationName,
        MatchDate: data.MatchDate,
        LiveScoreActivated: data.LiveScoreActivated,
        TeamScore: ko.observable(data.TeamScore),
        OpponentScore: ko.observable(data.OpponentScore)
    };
}

我正在改变观察数据的方式：

 self.AddScoreToOpponentTeam = function () {
        self.matchModel().TeamScore(self.matchModel().TeamScore() + 1);
        taskHub.server.updateLiveScore(self.matchModel());
    }

问题：

Knockout模型在UI中更新，一切看起来都很好，但是...当我将可观察对象传递给服务器时它根本没有改变..（matchModel与它时相同先载了.. ..

更新可观察对象上的可观察属性的代码：self.matchModel（）。TeamScore（self.matchModel（）。TeamScore（）+ 1）;

那么......我在这里做错了什么？

更新时间：09.02.2016：09：15显示更多代码：

用数据填充挖掘模型：

var url = 'api/MainPage/GetMatchById?matchId=' + matchId;

$.post(url,
    function (data) {
        model.livematch(data);
        console.log(data);
        model.matchModel(toKnockOutObservable(data));
    }, 'json');

ko.applyBindings(model, document.getElementById("livematch"));

使用数据填充挖空模型：

function toKnockOutObservable(data) {
    return {
        Id: data.Id,
        TeamId: data.TeamId,
        TeamName: data.TeamName,
        OpponentName: data.OpponentName,
        LocationName: data.LocationName,
        MatchDate: data.MatchDate,
        LiveScoreActivated: data.LiveScoreActivated,
        TeamScore: ko.observable(data.TeamScore),
        OpponentScore: ko.observable(data.OpponentScore)
    };
}

用于修改TeamScore的KO Viewmodel和点击处理程序：

var LiveMatchViewModel = function() {
    var self = this;
    self.livematch = ko.observable();
    self.matchModel = ko.observable();

    self.AddScoreToHomeTeam = function () {
        var teamScore = self.matchModel().TeamScore();  // Teamscore is 0 (OK)
        teamScore += 1;
        self.matchModel().TeamScore(teamScore);
        taskHub.server.updateLiveScore(self.matchModel()); // When passed to back-end TeamScore property is still 0 (WRONG).
        console.log("Ny teamscore verdi i modellen " + self.matchModel().TeamScore()); // Teamscore is now 1 (OK)
    }

UI中的数据绑定部分（单击AddScoreToHomeTeam后，可以正常显示TeamScore：

<!--ko with: matchModel-->
    <%--// HOME TEAM--%>
    <div class="col-sm-12">
        <div class="widget-container row">
            <div class="col-sm-12 widget-box">
                <div class="widget-content scrollable visible">
                    <div class="header">
                        <p>
                            <!--ko text: TeamName-->
                            <!--/ko-->
                        </p>
                        <p>
                            <img src="Content/Images/liveupdate.gif" />
                        </p>
                    </div>
                    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
                        <h1><!--ko text: TeamScore--><!--/ko--></h1>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <button data-bind="click: $parent.AddScoreToHomeTeam" type="button" class="btn btn-primary btn-lg" id="team_plus" style="width: 100%; height:100px">
                    <span  class="glyphicon glyphicon-big glyphicon-plus" aria-hidden="true"></span>
                </button>

更新：UpdateLiveScore的实施

        public void UpdateLiveScore(MatchWidget matchdata)
    {
        MatchWidget match = ClubService.AddMatchPoint(matchdata);
        Clients.All.updateLiveScore(match);
    }

MatchWidget类（viewmodel后端）

public class MatchWidget
{
    public int Id { get; set; }
    public int TeamId { get; set; }
    public string TeamName { get; set; }
    public string OpponentName { get; set; }
    public string LocationName { get; set; }
    public DateTime MatchDate { get; set; }
    public int TeamScore { get; set; }
    public int OpponentScore { get; set; }
    public bool LiveScoreActivated { get; set; } = false;
}

我现在唯一可以考虑的是....是否存在数据类型不匹配或导致此问题的原因？

他们被指定为int的后端..想法？

Answer 1

嗯..这里问题的解决方案非常简单，但是由于关于这个主题的不易理解的文档，很难找到..

几乎像了解古埃及的象形文字一样。

事情是......具有可观察属性的Observable对象包含保存您更改的新值的函数。在我的情况下...... TeamScore ..

无论你如何通过浏览器调试和调试这一点，这一切似乎都是正确的，但是当你将可观察对象传递给服务器时......你不会得到更新的数据，因为这是基于函数（...是可观察对象内的可观察属性）..

所以...当阅读文档中的序列化和反序列化时，我开始明白我需要在之前序列化对象我将它发送到服务器，因为存储了值..在可观察的功能中..

所以下面的代码示例为我解决了这个问题：

var LiveMatchViewModel = function() { var self = this; self.livematch = ko.observable(); self.matchModel = ko.observable(); self.AddScoreToHomeTeam = function () { self.matchModel().TeamScore(self.matchModel().TeamScore() + 1); var data = ko.toJSON(self.matchModel()); taskHub.server.updateLiveScore(data); }

注意ko.toJSON（self.matchModel（））..

将已更改的observable序列化并存储回对象，生成JSON，并且可以轻松地作为JSON字符串传递回服务器..

VOILA！......问题解决了......

Knockout：Observable中的Observable只在UI中更新，但在传递给服务器时没有变化？

更新时间：09.02.2016：09：15显示更多代码：

更新：UpdateLiveScore的实施

1 个答案: