Ractive, две привязки на ‹вход›

Примечание. Я не имею в виду "двустороннюю привязку"

Я использую декоратор ractive (select2) для преобразования ввода в select2. Данные, которые я получаю через ajax, представляют собой некоторые записи из базы данных, например:

[{id:1, name:"test", quantity:2, image:"image.jpg"}, 
{id:2, name:"bar", quantity:21, image:"image2.jpg"}, 
{id:3, name:"foo", quantity:21, image:"image3.jpg"}]

Я форматирую этот объект, используя функции select2, formatResult и formatSelection

Элемент, для которого я использую декоратор, выглядит примерно так:

<input type="hidden" value="{{values}}" decorator="select2">

После того, как пользователь что-то выберет, values будет равно идентификатору выбранного объекта (например: значения = 1,3, если я выберу первую и последнюю записи)

Мой вопрос: как я могу получить полный объект, который был выбран? Я думал о двух привязках к <input> (<input value="{{values}}" data-objects="{{objects}}">, чтобы декоратор мог также сохранять полные объекты, когда пользователь что-то выбирает. Но когда я отлаживаю декоратор, node._ractive.binding показывает только значение, а не другие атрибуты.


javascript ractivejs
person maxgalbu    schedule 19.12.2014    source источник
comment
Вход, который должен хранить значение, - это html, поэтому он может хранить только строку. Поэтому, если вам нужен объект, вы должны сериализовать его как строку (JSON.stringify) в атрибуте значения. Затем, когда он выбран, вам нужно будет проанализировать строку как объект (JSON.parse), чтобы получить доступ к объекту.   -  person Van    schedule 19.12.2014
comment
@ Ван, да, ты прав, я об этом не подумал. Я мог бы сохранить объекты в атрибуте data-, а затем получить их позже. Тем не менее, мне больше нравится мое решение. Спасибо, в любом случае :)   -  person maxgalbu    schedule 19.12.2014

Ответы (1)


arrow_upward
0
arrow_downward

Я решил это, сохранив результат запроса ajax в ractive, а затем сопоставив идентификаторы с идентификаторами объектов, чтобы найти исходные объекты.

Не самая красивая вещь, но она работает.

Ractive.decorators.select2.type.whatever = {
    tags: [],
    separator: "|",
    ajax: {
      url: "ajax_url",
      data: function(searchterm, page) {
        return {
          searchterm: searchterm,
          page: page,
        };
      },
      results: function(data, page) {
        //Here i save the records
        ractive.set("data", data.records);
        return {results: data.records, more: data.more};
      }
   }
};


var ractive = new Ractive({
  el: "things",
  template: "template",
});

ractive.observe("ids", function(ids) {
  var data = ractive.get("data");
  ids = ids.split("|");
  
  //I can obtain the original objects
});
<script src="http://cdn.ractivejs.org/latest/ractive.js"></script>
<script src="https://rawgit.com/Prezent/ractive-decorators-select2/master/ractive-decorators-select2.js"></script>

<!-- select2, jquery missing -->

<script type="ractive-template" id="template">
  <input type="hidden" value="{{ids}}" decorator="select:whatever">
</script>

<div id="things"></div>

person maxgalbu    schedule 19.12.2014