Dynamically generate html and assign data-bind

[folg...@gmail.com]

Hi Guys,

I'm trying to find a way to dynamically generate the html with knockout (instead of jQuery etc) and set data-bind attribute to it.

For example,

<ul data-bind='foreach:MetaData'>

    <li>

          <input type="text" data-bind='value:{{Name}}'>  //how to bind to the content of Name??

    </li>

</ul>

function ViewModel(){

  var self = this;

   self.MetaData = [{ Name: 'FirstName' }, { Name: 'LastName'}];

   self.FirstName = ko.observable();

   self.LastName = ko.observable();

}

var vm = new ViewModel();

ko.applyBindings(vm);

Then i can use self.FirstName() to get binded value,one thing is i don't know how to deal with {{Name}} in the html, anyone has any clue on this?

[parwej ahamad]

<input type="text" data-bind='value: Name'>  should work!

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[folg...@gmail.com]

Thanks for the reply, but i don't it work.

<input type="text" data-bind='value: Name'> this will try to bind the value to "Name" instead of the content of Name.

[parwej ahamad]

Can you put your code in fiddle?

in the mean time you can try :

<input type="text" data-bind="value: $data.Name"> 

[folg...@gmail.com]

Sorry, i just know what i want instead of how to implement that.

$data.Name is same as Name here.

What i want is try to bind the input value to the content of the Name, let's say if the Name is FirstName, then i want it bind to FirstName

[parwej ahamad]

I misunderstood your question, I hope you are looking this:

Html

<ul data-bind='foreach:MetaData'>

    <li>

          <input type="text" data-bind='value: $parent[Name]()'>  //how to bind to the content of Name??

    </li>

</ul>

Js

        function ViewModel() {

            var self = this;

            self.MetaData = [{ Name: 'FirstName' }, { Name: 'LastName'}];

            self.FirstName = ko.observable('fname'); //Test data

            self.LastName = ko.observable('lname'); //Test data

[parwej ahamad]

For better understanding, here you can find all binding context:

http://knockoutjs.com/documentation/binding-context.html

[folg...@gmail.com]

Buddy, the solution you mentationed works! 

Here's comes with a more chelange one! if i remove below statements, is there  way to do that?

            self.FirstName = ko.observable('fname'); //Test data

            self.LastName = ko.observable('lname'); //Test data

[parwej ahamad]

Then what will be your binding value source?

if you want to set any custom value based on your column then go for computed observable.

http://knockoutjs.com/documentation/computedObservables.html

--

[folg...@gmail.com]

<input type="text" data-bind='value: $parent[Name]'> will do, no need "()"

[folg...@gmail.com]

thanks for all the replies, buddy.