I am currently working on a Web page which is built dynamically, not only on the initial page load, but also updating the page via REST-based service calls which return HTML fragments (containing their own "data-bind" tags) as well as portions of JavaScript meant to augment the observable object.
I have a simple ViewModel which looks like the following:
Inside the Web page, I have both an <input> element and a <div> element (acting as a placeholder) which looks like something below:
In the JavaScript, the view is correctly bound in my $(document).read() :
Now, I make a REST-based service call which return the following fragment (as variable 'htmlFragment'):
I then set the 'html' member of my ViewModel:
I am seeing the following occur: a) The text box appears with the value "Test"; and b) after the service call, a new text box appears, but without any data. Now, changing the text box originally rendered will update the ViewModel, but the second text box will not. The HTML (with the same binding as the first generated text box) is injected into the DOM with the correct data-bind tag, but no binding occurs on the element.
For lack of any other methods I decided to again call kendo.bind($("#mainView"), viewModel) after the service call and after the HTML injection and it then apparently binds correctly and now both text boxes are synchronized. All of that being said, here are my questions:
a) Is there inherently anything wrong with calling the kendo.bind() method multiple times if either the ViewModel and/or DOM are augmented with new members/bindings?
b) Is there any way to 'refresh' the bindings without calling bind() again (as I don't know how other UI elements will behave yet)?
c) Is it possible to hook the change event (not specifically for a particular named binding, but for a binding type (i.e. "html" binding) and just refresh the bindings for that particular HTML fragment?
Any information or suggestions would be greatly appreciated, thank you!
I have a simple ViewModel which looks like the following:
var
viewModel = kendo.observable({ name:
"Test"
, html:
""
});
Inside the Web page, I have both an <input> element and a <div> element (acting as a placeholder) which looks like something below:
<
div
id
=
"mainView"
>
<
input
type
=
"text"
data-bind
=
"value: name"
/>
<
div
data-bind
=
"html: html"
></
div
>
</
div
>
In the JavaScript, the view is correctly bound in my $(document).read() :
kendo.bind($(
"#mainView"
), viewModel);
Now, I make a REST-based service call which return the following fragment (as variable 'htmlFragment'):
<
input
type
=
"text"
data-bind
=
"value: name"
/>
I then set the 'html' member of my ViewModel:
viewModel.set(
"html"
, htmlFragment);
I am seeing the following occur: a) The text box appears with the value "Test"; and b) after the service call, a new text box appears, but without any data. Now, changing the text box originally rendered will update the ViewModel, but the second text box will not. The HTML (with the same binding as the first generated text box) is injected into the DOM with the correct data-bind tag, but no binding occurs on the element.
For lack of any other methods I decided to again call kendo.bind($("#mainView"), viewModel) after the service call and after the HTML injection and it then apparently binds correctly and now both text boxes are synchronized. All of that being said, here are my questions:
a) Is there inherently anything wrong with calling the kendo.bind() method multiple times if either the ViewModel and/or DOM are augmented with new members/bindings?
b) Is there any way to 'refresh' the bindings without calling bind() again (as I don't know how other UI elements will behave yet)?
c) Is it possible to hook the change event (not specifically for a particular named binding, but for a binding type (i.e. "html" binding) and just refresh the bindings for that particular HTML fragment?
Any information or suggestions would be greatly appreciated, thank you!