2015-04-02 5 views
0

У меня есть компонент, который является выпадающим меню (на самом деле это меню кнопки бутстрапа). «Выпадающий список» получает свои значения, выполняя вызов AJAX на сервер и анализируя строку JSON.Обмен наблюдаемыми через экземпляры одного и того же компонента

Мне нужна эта кнопка в нескольких местах на странице, но мне нужны новые экземпляры компонента каждый раз, поскольку мне нужно передать в вызывающую модель просмотра, чтобы добавить к ней некоторые данные.

Очевидно, что каждый раз, когда я включаю эту кнопку, компонент выполняет вызов ajax, чтобы получить его значения, что означает, что на сервере имеется n номеров вызовов AJAX. В любом случае, я могу просто сделать один вызов Ajax и передать его каждому экземпляру компонента?

компонент Button

 function AddElement(params) { 
     this.options = ko.observableArray(); 
     var self = this; 
     var section = params.section; 

      $.getJSON("http://localhost:8080/test", function (data) { 
       elementOptions = data; 
       self.options(data); 
      }); 

      this.addElement = function (data) { 
       section.formElements.push(data); 
      }; 

    } 

Таким образом, вопрос, как я могу добиться этого или есть лучший способ реализовать такую ​​функциональность в KO (т.е. не компоненты)

Благодаря

David

+0

Выполняйте загрузку в родительском компоненте и передайте данные каждому дочернему компоненту. – CrimsonChris

+0

Плохая идея, чтобы ваш пользовательский интерфейс выполнял доступ к данным. Альтернативным решением было бы создать класс загрузчика, который отвечает за выполнение вызова AJAX и, возможно, его кеширование. – CrimsonChris

+0

Переместите вызов AJAX за пределы функции AddElement и залейте его локальным массивом. Внутри AddElement скопируйте данные из этого локального массива вместо вызова AJAX. –

ответ

0

Вариант 1: Выполняйте загрузку в какой-либо общей родительской части вашего компонента и передайте в наблюдаемый массив.

function AddElement(params) { 
    var self = this, 
     section = params.section, 
     options = params.options; 
} 

Вариант 2: Передайте объект-погрузчик вашему компоненту.

function AddElement(params) { 
    var self = this, 
     section = params.section, 
     loader = params.loader; //All 'AddElement' components get passed the same instance of the loader 

    this.options = ko.observableArray(); 
    loader.load(function (data) { //The loader is responsible for doing the AJAX once and only once. 
     elementOptions = data; 
     self.options(data); 
    }); 
} 
Смежные вопросы