对 2 个不同的 Viewmodel 使用一个函数 KnockoutJS答案

【问题标题】：Use one function for 2 different Viewmodels KnockoutJS对 2 个不同的 Viewmodel 使用一个函数 KnockoutJS
【发布时间】：2019-03-08 21:09:42
【问题描述】：

我有 2 个视图模型，一个是标题仪表板，一个只是一个在线存钱罐。我想使用从一个 js 文件到另一个文件的函数。我从仪表板中取出个人资料图片网址并放入我的 div。

<a class="icon-box permission desktop" data-local-storage="image" id="changeAvatarHeader" href="@Url.Action("Profile", "User")" data-bind="style: { backgroundImage: 'url(\'' +  Header().ProfileImage() + '\')' }">

二

<div class="piggy-user-profile-icon" data-local-storage="image" href="@Url.Action("Profile", "User")" data-bind="style: { backgroundImage: 'url(\'' +  HeaderModel().ProfileImage() + '\')' }"></div>

问题是 profileImage 在我的第二个 viemodel 中未定义。

function DashboardViewModel() {
var self = this;

self.searchModel = new AuthorizedSearchViewModel();
self.Header = ko.observable(new HeaderModel());
self.UnSeenMessagesCount = ko.observable(0);
self.Messages = ko.observableArray();
self.CanShowRemindProfile = ko.observable(false);
self.Remind = ko.observable(new RemindModel());

self.LoadUserInformation = function () {
    $.post('/User/GetUserInfoForDashboardHeader',
        function (response) {
            InitTawkChat(response);
            self.Header(new HeaderModel(response));
        }, "json").done(function () { console.warn("loaderOff") });
}

我在仪表板中使用的数据函数已在该页面上使用，因此我无法在我的 piggybankjs 中编写另一个函数，它将读取配置文件数据两次。

function HeaderModel (data) {
    var self = this;

    self.Balance = ko.observable();
    self.Name = ko.observable();
    self.ProfileImage = ko.observable('');
    self.CompleteLevel = ko.observable();
}

我只是想从中取出 ProfileImage

【问题讨论】：

标签： javascript html css asp.net-mvc knockout.js

【解决方案1】：

有很多方法可以做到这一点，但通常您会将公共数据从视图模型中移出到一个单独的对象中，您可以在任何您想使用它的地方引用该对象。您可以看到运行 here 的基本示例：

var globalState = {
  user: {
    name: ko.observable(),
    picture: ko.observable()
  }
}


var DashboardViewModel = function() {  

  this.loadUserInformation = function() {
    globalState.user.name("Ozzy Osbourne");
  };

};


var BankViewModel = function() {  
  this.ammount = ko.observable((20).toFixed(2));
};



ko.applyBindings(new DashboardViewModel(), document.getElementById('dashboard'));
ko.applyBindings(new BankViewModel(), document.getElementById('bank'));

HTML：

<div id="dashboard">
  Hello, <span data-bind="text: globalState.user.name"></span>!

  <button data-bind="click:loadUserInformation">
  load user
  </button>
</div>


<div id='bank'>
  <span data-bind="text: globalState.user.name"></span>, you have <span data-bind="text: ammount"></span>!
</div>

【讨论】：

谢谢老兄我试试

【解决方案2】：

self.LoadUserInformation = function () {
    $.post('/User/GetUserInfoForDashboardHeader',
        function (response) {
            InitTawkChat(response);
            self.Header(new HeaderModel(response));
            self.Header().ProfileImage(response.url);
        }, "json").done(function () { console.warn("loaderOff") 
})}

【讨论】：