Knockout: can we define a variable when using containerless control flow syntax in knockoutjs

Created on 12 Jun 2013  路  8Comments  路  Source: knockout/knockout

All 8 comments

I'm not sure what exactly you're asking for, but if you mean using the foreach binding, then yes you can:

<!-- ko foreach: { data: people, as: 'person' } -->
    <span data-bind='text: person.name'></span>
<!-- /ko -->

I want this:

<!-- ko foreach: { data: people, as: 'person' } -->
<!-- ko var strName = person.name } -->

(i want this , how to accomplish it, i want to place the value in a variable and use further down)

<!-- ko if: strName == person.name  } -->
    <span data-bind='text: person.name'></span>
<!-- /ko -->

Here's a binding I use:

ko.bindingHandlers['let'] = {
    'init': function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        // Make a modified binding context, with extra properties, and apply it to descendant elements
        var innerContext = bindingContext.extend(valueAccessor);
        ko.applyBindingsToDescendants(innerContext, element);

        return { controlsDescendantBindings: true };
    }
};
ko.virtualElements.allowedBindings['let'] = true;

You can then use it like this:

<!-- ko let: { strName: person.name } -->
...
<!-- ko if: strName === person.name -->
    <span data-bind='text: person.name'></span>
<!-- /ko -->
...
<!-- /ko -->

Great, that is perfectly what i was looking for!

@mbest can this binding be implemented for Knockout 3.4+? I've seen several issues with it when I tried to use it in a real application (in particular, it didn't update the variable in some cases).

It will be included in 3.5.0, whenever we manage to get that out. I just updated the comment above to use the latest version. The change was from var innerContext = bindingContext.extend(valueAccessor()); to var innerContext = bindingContext.extend(valueAccessor); (pass valueAccessor instead of calling it first).

@mbest Awesome, thank you for the quick answer! I'll try to test it shortly.

@mbest Just FYI, the above binding works & fixes all my issues. Thanks!

Was this page helpful?
0 / 5 - 0 ratings