aurelia-binding

问题 For the current project at work, we are creating quite a few custom controls that all share the same properties and that are bindable. @bindable required: boolean = false; @bindable minLength: number = 0; @bindable maxLength: number = 0; Since we'd like to avoid code duplication, the idea is to keep these bindable properties in a separate class, called 'Validation' in this case. import {Validation} from "./validation"; export class MyClass { private validation: Validation = new Validation();

问题 My structure in AureliaJS of components is: <parent> <child1> <child2> </parent> I have an object in child1 which I get with ajax requests: export class Child1 { fechedObject = {}: } I need this property with two-way binding and observable in the second component export class Child2 { // I need this fechedObject here } What is the best approach to get it? 回答1: I believe the best approach here is using two-way binding on both child models, to bind the model via two-way binding in the parent.

问题 UPDATE: Other people have reported this sample works well for them. Sounds like I was doing something wrong but I don't have the code anymore so I can't check what was the problem. ORIGINAL QUESTION: I have the following custom element with the following view-model and view: import {bindable} from 'aurelia-framework'; export class Test1 { @bindable name = null; } <template> <div>Name: ${name}</div> </template> Then I have a this view and view-model using the above custom element (this is the

问题 Given the following layout for app.html: <template> <require from="nav-bar.html"></require> <require from="bootstrap/css/bootstrap.css"></require> <nav-bar router.bind="router"></nav-bar> <div id="sidebar"><h3>This is the sidebar.</h3></div> <div id="page-host" class="page-host"> <router-view></router-view> </div> </template> How do I bind to the toggleSidebar function (which is exported from app.js) in nav-bar.html? <template bindable="router"> <nav class="navbar navbar-default navbar-fixed

问题 We have a template like this. the-template.html <template><div>${Foo}</div></template> We want to do this with it. some-file.ts let htmlString = makeItHappen('the-template.html', { Foo = 'bar' }); console.info(htmlString); // <div>bar</div> What is the equivalent of our makeItHappen function? 回答1: Ok so here's the gist: https://gist.run/?id=d57489d279b69090fb20938bce614d3a Here's the code in case that goes missing (with comments): import {bindable} from 'aurelia-framework'; import

问题 I need to create an input in Aurelia that only accepts a phone number. If the user types 1234567890 into this input it should display (123) 456-7890 and the bound variable would be set to 1234567890 . The result should be the same if the user types (123) 456-7890 into the input as well. If the user types a letter into the input, the input should not display the letter, nor should the bound javascript variable get updated. I'm able to partially achieve this using a ValueConverter: phone.ts

问题 I have a recursive object in my Aurelia view model that looks like this: Class BottomlessPit { Name: string = ''; MorePits: BottomlessPit[] = null; } Therefore, I'd like to use a recursive template in my Aurelia view. It will only be used in one place, so I would rather use a template literal. Here's some pseudocode that doesn't work: <template name="pit"> <li> ${Name} <compose view.bind="pit" repeat.for="subpit of MorePits"></compose> </li> </template> Is this a feature of Aurelia? 回答1: OK

问题 I have a checkbox list, when the user checks one of the checkbox a function is called in the .js file and it in turn calls a method dataservice.js which calls a webapi controller, this all works fine and returns the correct data. What happens when the process is finished is that the checkbox that fired the sequence isn't checked. I've inspected the result and schoolDistrict.IsChecked for that item is set to true, which is correct. How do I get the checkbox to be checked? Below is the code,

问题 I need to know how to refresh the bindings in Aurelia . I have been "Googling" for some time now, but can't seem to find the answer. The reason I need to refresh bindings is because some of the html (with click.delegate bindings) is generated after a call to server to retrieve data. I am updating a grid with some " Edit " and " Delete " buttons. Anyway, when I was using Durandal / KnockoutJS , I did the following: var body = this.element.find("tbody")[0]; if (body) { ko.cleanNode(body); ko

问题 Do you see any way to know when ANY model’s property has been modified through a binding? I would need something generic because it would be applied to all the forms of the application. This means I cannot just have a 'property’Changed() observable callback for every properties of the models. I’m thinking along the ways of overriding the properties setters created by the binding engine so they can call a single defined callback but I feel like there could be a better way. 回答1: I created a