Двухсторонний databinding

[Rinat]

Добрый день!
Большое спасибо, за то что сделали интеграцию с vue.js.
В данном случае очень интересует двухсторонний датабиндинг.
Однако, все равно, как и в случае с angular придется писать все в виде директив, что не очень подходит.

Вопрос, будет когда-нибудь двухсторонний датабинг из коробки?
Как тут например?
http://demos.telerik.com/kendo-ui/combobox/mvvm

Честно, читал справку и не раз, вроде как есть bind, dp, sync но не понятно. И непонятно, можно ли этими методами сделать что-то вообще. Хочется такой же простоты как у knokout.

Хочется, чтобы если я изменил какие-либо данные, то они обновились в других графических элементах, а не приходилось делать вручную.

Может можно повесить какого-нибудь слушателя, который ожидает какие-либо данные, и если на эти данные подписаны другие графические элементы, то он обновляет данные и в них? Однако беда, как он будет узнавать, когда данные надо отправлять? Надо в каждый графический элемент тогда вставлять в события, связанные с отправлением свою функцию, которая отвечает а отправку.
А вообще хочется такого:
https://webix-hub.github.io/webix-vue/samples/03_form_controls.html
Но с использованием чистого webix
Чтобы можно было написать свойство v-model.string:‘cval’ и в зависимости от полученных данных - он сделал активной на ту или иную вкладку.

[maksim]

Для всех форм контролов двухсторонний биндинг включен из коробки

<webix-combo v-model="some">

В общем случае, для webix-ui надо прописывать обратный биндинг, но это неизбежно, так как неочевидно какие именно данные из сложного ui блока нужно вернуть назад

<webix-ui :config="combo">

data:{
  combo:{
     view:"combo", on :{
           onChange:function(){ this.$scope.emit("input", this.getValue()); }
     }
  }
}

[maksim]

Хочется, чтобы если я изменил какие-либо данные, то они обновились в других графических элементах, а не приходилось делать вручную.

В самом вебиксе ( без vue ) можно связывать данные разных компонент так чтобы изменения в одном месте автоматически отражались во всех связанных компонента ( меняем данные в форме а они менются в связанных листах и селектах например ) Переключить таб в зависимости от загруженных данных возможно, хотя и не очень очевидно.

http://webix.com/snippet/214cb217

http://webix.com/snippet/fa7326d3

Но это именно связи между компонентами. Возможности наблюдать за внешним объектом и перестраиваться при его изменении нет.

[maksim]

Правильно ли я понимаю что вы говорите о синтаксисе вроде следующего

var state = {
	filterText:123,
	activeId:2
};


webix.ui({
	id:"app",
	cols:[
		{ view:"tree", data:some, bind:{ 
			selectedId     : "activeId"
			selectedObject : "activeData"
		}},
		{ view:"form", elements:some, bind:{ 
			values    : "activeData",
			visibility: "activeData"
		}},


		{ view:"text", label:"Filter", bind:{
			value:"value"
		}},
		{ view:"chart", bind:{
			data: function(){ 
				return webix.ajax("chart.php?filter="+this.$scope.filterText);
			},
			visibility: "activeData"
		}}
	]
})


app.bindState(state);

[Rinat]

Добрый день!

1. По поводу компонентов: тут не нравится то, что привязываться надо к определенной форме а не к какому-нибудь хранилищу. Как вы говорите - внешний объект.
2. По поводу синтаксиса: по идее да, но не понимаю что происходит при изменении.

Т.е как я обычно обновляю данные в инпут:

$$("template1").setHTML(test);
$$("text1").setValue(test);

В моем представлении так (через внешнюю функцию тогда можно использовать), а по хорошему, да как у вас.

var data = [
    {
        id: 'hello_message',
        value: 'Hello World',
        subcribers: {'template1', 'text1'}
    },

]

test.bind(data);

//обновилось во всех подписчиках
test.set('hello_message', 'Привет мир!');

Притом такой способ, можно пряменить как мне кажется и сейчас, надо просто написать свой велосипед, где проверять subcribers, затем искать эти элементы, если они есть, то обновлять в них данные. Беда в том, что данные ведь не всегда такие простые, это могут быть и табличные данные. И в многих элементах оно ставится по своему. Если это шаблон, то setHtml, если text, то setValue, если таблица… и т.п.