Используйте одну функцию для 2 разных Viewmodels KnockoutJS

Question

У меня есть 2 viewmodel, одна - заголовочная панель, одна - просто копилка онлайн.Я хочу использовать функцию из одного файла JS в другой.Я вынимаю URL-адрес профиля из приборной панели и вставляю в мой 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() + '\')' }">

II

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

проблема в профиле. Изображение не определено во второй модеме.

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 из нее

Answer 1

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") 
})}

Answer 2

Существует несколько способов сделать это, но обычно вы перемещаете общие данные из модели представления в отдельный объект, на который ссылаетесь везде, где хотите его использовать.Базовый пример этого: здесь :

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>