ractivejs

问题 I have a simple task of rearranging a couple of Arrays in a JSON, so ractive.js can handle it better. But I got carried away a bit, and the outcome was not particularly satisfactory. An example of my initial Array: [{ "_id": 1, "type": "person", "Name": "Hans", "WorksFor": ["3", "4"], }, { "_id": 2, "type": "person", "Name": "Michael", "WorksFor": ["3"], }, { "_id": 3, "type": "department", "Name": "Marketing" }, { "_id": 4, "type": "department", "Name": "Sales" }, { "_id": 5, "type": "person

问题 I have a simple task of rearranging a couple of Arrays in a JSON, so ractive.js can handle it better. But I got carried away a bit, and the outcome was not particularly satisfactory. An example of my initial Array: [{ "_id": 1, "type": "person", "Name": "Hans", "WorksFor": ["3", "4"], }, { "_id": 2, "type": "person", "Name": "Michael", "WorksFor": ["3"], }, { "_id": 3, "type": "department", "Name": "Marketing" }, { "_id": 4, "type": "department", "Name": "Sales" }, { "_id": 5, "type": "person

问题 I'm curious if I can somehow use dynamic variable names in templates. For example, I'm having a loop, though a type of units in my game: {{# config.units:unit }} <input type="text" id="unit_{{unit}}" class="toTrain selectable" value="" placeholder="0" /> {{/ config }} Where the value of the input should return the value of {{units_1}} for example, which represents the amount of units (type 1). I could easily do some external object and store the amount of units for each of them but, I was

问题 I have a paging function since it's a little bit tricky to do it in the templates. The problem is that if I place it like this: {{ paging( rows, limit, offset ) }} It will obviously escape the output , so I tried with triple-stache and the output is as expected. But then, it wont detect on-click events anymore.. any suggestions ? A workaround I thought about is setting jQuery to detect the click event on the .pagination > li but I just wanted to ask if there's any way RactiveJS can do that

问题 I want to enable a button when two text fields have length > 0: How do I refer to these text fields lengths to express this? Seems simple, but its not obvious to me how to refer to the component's and their text (length). I basically want to use FRP to enable/disable button for form submission. These would be "sibling" components I suppose. 回答1: If two-way binding is an option, you could do something along these lines: <input value='{{foo}}'> <input value='{{bar}}'> <button disabled='{{ !foo

问题 I want to enable a button when two text fields have length > 0: How do I refer to these text fields lengths to express this? Seems simple, but its not obvious to me how to refer to the component's and their text (length). I basically want to use FRP to enable/disable button for form submission. These would be "sibling" components I suppose. 回答1: If two-way binding is an option, you could do something along these lines: <input value='{{foo}}'> <input value='{{bar}}'> <button disabled='{{ !foo

问题 New to Ractive.js and after reading over the docs I'm still hung up on some of the syntax. My example below creates a canvas tag for each element in my array and then instantiates a distinct object of a custom class for each to handle the animation. As noted in comments, I'm throwing three errors. In the event handler I want to refer to the height property (defined in my array), but neither this.get(repeater.height) nor this.repeater.height work. I also want to call a method of the object

问题 I have seen lots of examples of using array based functions in Ractive for sorting and ordering lists but I was wondering if the same facility could be easily effected for nested object lists: Assuming something like this: var ractive = new Ractive({ el: 'main-col', template: $(templates).html(), data: {ObjList: {{key1:{x:data,y:dataB,....},{key2:{x:data,y:dataB,....},.. } }); template: {{#each ObjList}} render a card view per each key object nest {{/#each}} I would like to be able to: Direct

问题 I've built a ractive.js app using partials. These partials are loaded via fetch/ajax - and all works nicely. I then decided I wanted to encapsulate data along with the partial so looked at components - as I understood a component to do just that: Isolate a template/partial with its data. I then looked to load the components in: http://ractivejs.github.io/ractive-load/ However, I don't really see the advantage of this approach - as it appears with the loader you can only load in the components

问题 When using ractive this works fine: <select value='{{sortColumn}}'> {{#each type}} <option>{{this}}</option> {{/each}} </select> As long as sortColumn itself is a fixed string. My question is, what if I want to create several selects, indexed by a upper level array, something like: {{#each list}} <select value='{{sortColumn}}'> {{#type[.]}} <option>{{this}}</option> {{/}} </select> {{/each}} Where type is indexed by a list element. This works great in terms of rendering, I get the right