logo
down
shadow

Does Knockout support bi-directional binding to styles?


Does Knockout support bi-directional binding to styles?

Content Index :

Does Knockout support bi-directional binding to styles?
Tag : knockout.js , By : Mostapen
Date : November 24 2020, 01:01 AM

I hope this helps you . The question from your title can be answered using the Knockout source: it's open, and actually pretty easy to go through. To quote the relevant file:
ko.bindingHandlers['style'] = {
    'update': function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor() || {});
        ko.utils.objectForEach(value, function(styleName, styleValue) {
            styleValue = ko.utils.unwrapObservable(styleValue);

            if (styleValue === null || styleValue === undefined || styleValue === false) {
                // Empty string removes the value, whereas null/undefined have no effect
                styleValue = "";
            }

            element.style[styleName] = styleValue;
        });
    }
};

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Is there a reason CSS doesn't support applying styles from within styles?


Tag : function-programming , By : Caleb Ames
Date : March 29 2020, 07:55 AM
may help you . It would make recursion possible (which would mean parsers would need to be able to recover from it) Multiple rule-sets can use the same selector, so which one would apply? Or would all of them?
You can achieve what you want with:
<img … class="awesome-image super-awesome-image">
.awesome-image,
.super-awesome-image {
  border: 1px #000 solid;
  margin: 2px;
}

.super-awesome-image {
  padding: 2px; 
}

Custom Knockout binding failing when invoking default knockout binding


Tag : knockout.js , By : Viv
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further You can think of the update function of a custom binding like a computed observable (Knockout does use computed observables to track dependencies when the bindings on an element are executed). So, in your custom binding you are not grabbing a dependency to the observable that you are bound against, because your code is being executed asynchronously.
In your update, you would probably want to do something like:
update: function(element, valueAccessor) {
    //just grab dependency
    ko.utils.unwrapObservable(valueAccessor());

    $(element).fadeOut(700, function() {
       ko.bindingHandlers.html.update(element, valueAccessor);           
       $(element).fadeIn(700);
    });        
}

Does knockout.js support binding between html elements?


Tag : javascript , By : Lathentar
Date : March 29 2020, 07:55 AM
may help you . You can't do this without a ViewModel but you can do this with computed variables:
//In your view model
this.showFormElement = ko.computed(function(){
    if(this.checkboxValueiswhatIwant()){
        return true;
    }
    return false;
}, this);
<form [id, classes, etc..]>
    <input type="checkbox" data-bind="checked: checkboxValueiswhatIwant" />
    <input type="input" data-bind="visible: showFormElement" />
</form>

Using dynamic parameters for binding ElementName in styles. Reusing styles


Tag : chash , By : Asbie
Date : March 29 2020, 07:55 AM
hope this fix your issue Here's pure XAML solution:
Collect all controls on which the text block depends in an array and set it as data context:
<Image x:Name="image1"/>
<Image x:Name="image2"/>
<TextBlock Style="{StaticResource movingTextBlocksStyle}">
    <TextBlock.DataContext>
        <x:Array Type="system:Object">
            <x:Reference>image1</x:Reference>
            <x:Reference>image2</x:Reference>
        </x:Array>
    </TextBlock.DataContext>
</TextBlock>
<DataTrigger Binding="{Binding [0].IsMouseOver}" Value="True">...</DataTrigger>
...
<DataTrigger Binding="{Binding [1].IsMouseOver}" Value="True">...</DataTrigger>

How would I get a Knockout Click binding to respect the Knockout Enable binding on non-form elements?


Tag : knockout.js , By : dyarborough
Date : March 29 2020, 07:55 AM
Related Posts Related QUESTIONS :
shadow
Privacy Policy - Terms - Contact Us © scrbit.com