Problem with select in Knockoutjs and Mootools

Asked

Viewed 76 times

2

I’m having a problem in a simple test with Knockoutjs in conjunction with Mootools:

<div>
    <select data-bind="foreach: animais">
        <option data-bind="text: nome, value: id"></option>
    </select>
</div>

var Animal = new Class({
    initialize: function(id, nome) {
        this.self = this;
        self.id = id;
        self.nome = nome;
    }
});

viewModel = new Class({
    initialize: function(animais) {
        this.self = this;
        self.animais = animais;
    }
});

ko.applyBindings(new viewModel([
    new Animal(1, "Cachorro"),
    new Animal(2, "Gato"),
    new Animal(3, "Macaco")
]));

Rodem no Jsfiddle: http://jsfiddle.net/p6nyr4nq/1/

Interestingly, select contains "Monkey" repeated 3 times.

javascript knockoutjs mootools

  • Andrey, the right thing would be to use the bindingHandler options, I tried using here: http://jsfiddle.net/p6nyr4nq/6/, but since I don’t know Mootools, I don’t know how it works to create and organize your ViewModel...

  • Can you explain better what you want to do? You are exporting the self to the global space... your use of the Mootools Class is not correct. If you explain it better you can help...

1 answer

3


Right as I said, is to use the BindingHandler of options in a select.

Your HTML would get smaller:

<div>
    <select data-bind="options: animais, optionsText: 'nome', optionsValue: 'id'" />
</div>

The parameters optionsText and optionsValue are respectively the properties of the object for the text and the value of the option that will be generated.

Your Javascript will be almost the same, only the fact of using this.self = this; was breaking the internal structure of the object. With a small hit:

var Animal = new Class({
    initialize: function(id, nome) {
        var self = this;

        self.id = id;
        self.nome = nome;
    }
});

var viewModel = new Class({
    initialize: function(animais) {
        var self = this;
        self.animais = ko.observableArray(animais);
    }
});

ko.applyBindings(new viewModel([
    new Animal(1, "Cachorro"),
    new Animal(2, "Gato"),
    new Animal(3, "Macaco")
]));

Follows the Jsfiddle with the example.

  • 1

    Wouldn’t it be better to use the this of the Class instead of indicating it via self? Thus: http://jsfiddle.net/p6nyr4nq/10/ (+1)

  • Could be. I don’t know what he’ll do with the self after. I kick that the use of the self would be later, for example in an event function, where the this is the Binding Context, not the object itself. But in that case it would have to change the this.self = this for this.eu_mesmo = this;

  • 3

    I will also wait to see what Andrey wants and make further suggestions if necessary. I’m glad to see questions with Mootools coming around.

  • Wakim and @Sergio Sorry for the delay. I haven’t been able to check the result yet as Jsfiddle went off the air. But I’ve seen that the mistake was the question of this/self itself. The only reason why I used the self is because the official tutorials use it. If there’s a way to do this with Mootools, it’s certainly not the way I tried. =)

  • 1

    @Andrey no Mootools o this is treated in a special way in the sense that it refers to the Class and the initialize method is the constructor of the Class. Thus use the this inside the initialize is the most logical and easiest to read.

  • @Andrey, Wakim’s answer is correct. If she solved your problem you can mark as accepted.

  • @Sergio got it. Just when you said "refers to class," you actually meant "refers to instance of the class, "no? I marked Wakim’s reply as correct, and thank you for the clarification. =)

  • 1

    @Exact Andrey :)

Show 3 more comments

Browser other questions tagged javascript knockoutjs mootools

You are not signed in. Login or sign up in order to post.