Привязка данных в Alloy довольно проста, когда вы используете модели и коллекции для хранения данных. Однако с такими уникальными вещами, как изображение профиля, имя пользователя или просто определенные цвета / свойства, вам на самом деле не нужны модели. И тогда на самом деле нет возможности делать привязку данных.

Конечно, вы можете сделать это вручную с помощью глобальных событий или чего-то подобного, но это действительно сложно и трудно забыть, что это есть.

Я хотел сделать что-то, что могло бы сделать это за меня, срабатывающее, когда я работал над приложением, у которого были изображение профиля и имя пользователя во многих местах приложения. Создание «пользовательской» модели только для этого было слишком трудоемким для чего-то столь простого, и я был уверен, что смогу повторно использовать эту технологию для многих других целей.

Итак, что такое стабаллой

Итак, я придумал staballoy. Это небольшая библиотека поверх Alloy, которая имеет приоритет над функциональностью Alloy.createController. Этот метод вызывается при создании любого контроллера, поэтому staballoy переопределяет метод, чтобы привязка данных работала. Внутри он работает одинаково, поэтому staballoy обратно совместим с любым проектом Alloy.

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

Используете ли вы какую-либо другую библиотеку, которая переопределяет Alloy.createController? В этом случае staballoy не будет совместим с ним, имейте это в виду. К счастью, существует всего несколько библиотек, которые этим занимаются.

Как включить стабаллой?

Простой! Просто включите его в alloy.js:

var staballoy = require('staballoy);

Поскольку мы определяем переменную в alloy.js, имейте в виду, что это также глобальная переменная. Что в данном случае является хорошей ситуацией, поскольку вам нужен доступ к стабильному сплаву повсюду. Так что теперь в каждой библиотеке / контроллере вы можете сразу добраться до нее.

Но перед этим вам, конечно, нужно включить библиотеку в свое приложение. Вы можете найти это на npm!

С этого момента любой элемент пользовательского интерфейса во всем вашем приложении будет анализироваться staballoy. Но имейте в виду, что включены только элементы пользовательского интерфейса, созданные с использованием Alloy. Любые элементы пользовательского интерфейса, созданные вручную с использованием Ti.UI.create, не будут анализироваться и не будут работать сразу со staballoy. Считайте это хорошей причиной, чтобы начать делать свои приложения полностью в xml, а не смешивать.

Заполнение переменных

Теперь причина, по которой вы хотите использовать staballoy в своем приложении. Вы можете подписаться на переменные, определенные внутри staballoy. Но, конечно, сначала необходимо заполнить эти переменные. Имейте в виду, что эти переменные не хранятся постоянно, а зависят от сеанса. Итак, рекомендуется заполнять переменные, как только вы получите доступ к данным. Во многих случаях это означает, что вы можете заполнить его внутри alloy.js прямо под включением staballoy.

staballoy.setVar('user', {"name": "Foo Bar", "picture": "/images/image.png", "xp": 431});

Если вам нужно заполнить переменную внутри контроллера, staballoy внедрил методы внутри него через аргументы.

$.args.staballoy.setVar();

Подписка на переменные

Теперь, конечно, наступает настоящая причина, по которой вы хотите использовать staballoy. Подписка на переменные. Каждый раз, когда переменная обновляется с помощью метода setVar, независимо от того, где находится приложение, все, что связано с ней, будет обновляться автоматически. Самый простой способ подписаться - прямо через tss. Мы собираемся привязать text из label к свойству имени пользователя, которое мы определили ранее.

Итак, представьте, что у нас есть этот ярлык:

<Label id="username" />

Мы можем привязать это к переменной, определенной ранее, используя это в tss:

'#username': {
  staballoy: {
    subscriptions: {
      "user_name": "text"
    }
 }
}

Как видите, мы используем user_name для привязки. Это пользовательская переменная со свойством name внутри. Вместо использования user.name нам приходится прибегать к использованию _ из-за ограничений в Alloy. Подробнее о глубокой настройке / получении читайте в ридми по стабилизации.

Итак, теперь, всего лишь после настройки tss, метка всегда будет актуальной. Даже если контроллер находится в фоновом режиме, еще не создан или на другой вкладке. Вам никогда не придется беспокоиться о его ценности. Даже если переменная установлена ​​после привязки к ней, она все равно будет работать.

Преобразование данных

Еще один дополнительный шаг, который мы можем сделать, - это преобразовать данные перед их применением в пользовательском интерфейсе. Это отлично подходит для вещей, которые не отражаются должным образом один на один от данных до визуализации. Возьмем, к примеру, опыт, который обычно не отражает автоматически процент прогресса.

<Label id="xpProgress" />

Мы снова собираемся использовать объект пользователя, сохраненный ранее, но на этот раз мы добавляем logicFunction

'#username': {
  staballoy: {
    subscriptions: {
      "user_xp": "text"
    },
    logicFunction: "parseUserXP" 
  }
}

Затем мы собираемся создать функцию, на которую он ссылается, в пространстве имен $.

$.parseUserXP = function(value){
  var progress = value * 0.2; // calculating % based on 500
  return progress + '%';
}

Этот метод будет вычислять процентное значение при условии, что 100% значение равно 500. Конечно, в реальной жизни расчет прогресса на основе XP обычно зависит от уровней, но для примера мы сохраняем простоту. Затем он возвращает процент с добавленным к нему %. Возвращаемое значение, в свою очередь, затем помещается в свойство text метки, как показано в части подписок.

Двусторонняя привязка данных

Больше всего мне нравится самая последняя надстройка с двусторонней привязкой данных. Это работает нестандартно, если вы привязываете к свойству value любого элемента, который его поддерживает.

Вывод

Staballoy выводит привязку данных на новый уровень. Он позволяет привязать простые данные к определенным элементам без необходимости использования моделей. Теоретически он может заменять и модели, но я бы не рекомендовал этого делать.

Мне очень любопытно, внедрили ли вы в свои приложения staballoy! Где вы его используете и находятся ли они в производстве.

Вы можете прочитать всю документацию по staballoy на npm или, конечно, в соответствующем репозитории GitHub.