I'm trying to use CableReady and I noticed in the docs that there are associated JavaScript Events that I can use.
However, there are no examples of how to use them.
Example:
cable_ready["MyChannel"].morph(
selector: "string", # required - string containing a CSS selector or XPath expression
html: "string", # [null] - the HTML to assign
children_only: true|false, # [null] - indicates if only child nodes should be morphed... skipping the parent element
permanent_attribute_name: "string", # [null] - an attribute name that prevents elements from being updated i.e. "data-permanent"
focus_selector: "string", # [null] - string containing a CSS selector
)
And the docs have:
JavaScript Events
cable-ready:before-morph
cable-ready:after-morph
However I don't know how to call these events in my Javascript.
Has anyone worked with these before?
You can use an after-morph event like this:
document.addEventListener("cable-ready:after-morph", () => {
console.log('after-morph')
})
Now, let's say we've just performed a outer_html operation from our Rails controller and we would like to catch the after event:
document.addEventListener("cable-ready:after-outer-html", (event) => {
console.log('after-outer-html')
})
Related
I am trying to convert JSON to HTML. I am able to create the HTML element and ID attribute. However I can not create the onclick events. I am using the npm json2htmll.js npm module.
let jsontoHtml: {
"<>": "div",
"html": [
{
"<>": "button",
"id":"button1",
"onclick": "ButtonClicked()",
"text": "Click"
}
]
};
let html = json2html.transform({}, jsontoHtml);
Current output:
</button id="button1">click</button>
Expected output:
<button id="button1" onclick="buttonClicked()">Click</button>
Do you know how I can achieve the expected output?
json2html doesn't support on events using the npm module. Instead I would look at using the jquery plugin for json2html. You'll be able to add events there that will directly hook into the jquery event. See this example on json2html.com
{'<>':'button','onclick':function(e){
//e.event : the jQuery event
//e.data : user specified data from the the json2html options variable eventData (see Usage)
//e.obj : the source object that we are transforming
//e.index : the index of the array in which the source object was found
}}
I'm using vuetify validation, and i have three date fields: Month, From, To. I need to add required rule according to the following:
If Month selected - From and To not required.
If any of From or To selected - Month not required.
I tried computed() method, to check if From or To are null, but it seems like :rules set once, and then not change.
computed: {
monthRules() {
return this.searchForm.from ? [] : [factory.required()];
},
Here's some code
<date-field
ref="month"
v-model="searchForm.month"
:rules="monthRules"
>
</date-field>
<date-field
ref="from"
v-model="searchForm.from"
#input="validateTo"
:rules="fromRules"
>
</date-field>
<date-field
ref="to"
v-model="searchForm.to"
:rules="toRules"
>
</date-field>
monthRules: [factory.required()],
fromRules: [],
toRules: [
*some rules from factory here*
],
factory
required() {
return v => !!v || 'Field is required';
},
Is it possible to dynamically build an array of rules? Or is there a better way
I am not very clear on Vuetify rules as I think it's better to use a specialized library like vee-validate which already has a ton of pre-defined rules, for something like this. As for the dynamic rules, the best way to go about would be to use an object binding like so:
:rules="{
required: requiredBool
}"
Where requireBool is your computed property. Again, as I said, I am not very familiar with Vuetify rules, but this works like a charm with Vee-Validate.
I understand with Vue JS 2, you have to declare reactive properties upfront.
However, just wondering how would you do a rest call if the child objects appear depending on a few other conditions. For example:
"abc": {
"tests": [
{
"a1": "xxxx",
"result": null,
"selected": false,
"comment": null
} ...
]
}
Now in this example, what happens if the tests are empty ((null)) in some circumstances?
eg: if you bind it using the v-model xx.xx.abc.tests[1].selected - This wont work as tests[1] is null.
So I tried using Vue.set in mounted function to assign a default value but that did not work. It will be hard to define all these in a static data as then I have to know all the tests before the rest call.
Looking at the Vue warning when accessing nested object the issue is if I do the check for inside
the checkbox (Checkbox is rendered from Spring MVC tag).
<form:checkbox id="xx" path="..Spring MVC Path.." v-if="(xx.xx.abc.tests!=null && xx.xxx.abc.tests[3].selected)" **v-model**="xx.xxx.abc.tests[3].selected"/>
The checkbox does not appear at all. I want it to appear regardless of empty value as it gives users to add the option. Also, the other option of statically declaring it does not work as I don't know want to hard code and define array.
for example that means in case another element is added it is hardcoded into script:
[
{
"testName": String,
"result": String,
"selected": false,
"comment": String
},
{
"testName": String,
"result": String,
"selected": false,
"comment": String
}
]
Basically I need to bind using v-model even if it is null in this case. Tried Vue.set but for some reason did not appear to work.
I guess I am missing something here,any help would be appreciated.
Assume that you have a list of checkbox to render whether the child element is null on not. but you do know the array length, right?
If you do, consider use v-for to render checkboxes (then you’re able to track array item by index) and listening on its change event then assign specific value to specific object when events fire
thanks for the replies. As this was due to rest call not returning all required attributes that was defined in Vue model(As mentioned in question).So I checked that in final section of rest call and if they are empty, created them.
axios
.get(***URL***)
.then(
response => {
this.info = response.data;
this.status.loaded = true;
}
)
.finally(
() => {
*** check and fill missing attributes with default values ***
**Example: this.$set(this.someObject, 'b', 2)
}
)
Reference:
https://v2.vuejs.org/v2/guide/reactivity.html
I'm getting this error: "TypeError: Event.$emit is not a function" whenever the watcher fires.
I can console log the Event object since I imported it in my main.js file.
I use a named prop because I have 3 different client tables on 1 page. I named the table as rmTable
<v-client-table name="rmTable" :data="filteredRMInvData" :columns="rmColumns" :options="rmOptions" v-if="rmInventoryData.length">
In my watcher:
materialType(value) {
Event.$emit('vue-tables.rmTable.filter::materialtype', value)
}
This is my customFilters in my rmOptions variable:
customFilters: [{
name: 'materialtype',
callback(row, query) {
console.log(row)
console.log(query)
return query.code.includes(row.material_group)
}
}],
How can I do this correctly? At least I should be able to see the row and query logs. I checked the guide on the github page and it seems I followed it correctly.
Assuming you have
Vue.use(VueTables.Event);
Then
materialType(value) {
VueTables.Event.$emit('vue-tables.rmTable.filter::materialtype', value)
}
Event is already a browser interface, which I'm guess is the reason it doesn't work.
I am creating a rallygrid component and would like to have the grid items grouped by their parent's Name attribute (bonus if I could also display the ID of the parent). I added the groupBy:'Parent' configuration to the storeConfig of the grid and was surprised that no results were returned. I also tried using groupBy:'Parent.Name' but still nothing.
I know this is possible with other fields such as Owner, but I'm at a loss as to why the Parent wouldn't be usable as well. Is this a bug, or am I setting the config up incorrectly?
Thanks
Change the storeConfig to keep the records from trying to update after being grouped:
storeConfig : {
remoteSort : false,
remoteGroup : false,
remoteFilter : false,
}
Add a listener to the load event which assigns a root level property to the record and groups by that record value. (For some reason store.group('Parent.Name'); doesn't work.)
load: function(store) {
store.each(function(record) {
record.set('ParentName', record.get('Parent') && record.get('Parent').Name || '-- Unparented --');
});
store.group('ParentName');
}
I thought it was a bug with the SDK too, but per WS API documentation, Parent, unlike Owner, or Feature is not sortable.
So when I use groupField: 'Parent' the grid is empty, and response showed error:
Ext.data.JsonP.callback6({"QueryResult": {..., "Errors": ["Cannot sort using attribute Parent"]
It is trying to sort by Parent, but Parent attribute is not sortable. So the SDK ran into a WS API limitation.
On a side note, I did not use groupBy, instead I used groupField on the store (in this example I grouped by Kanban field) :
var myStore = Ext.create('Rally.data.WsapiDataStore',{
model: 'UserStory',
groupField: 'c_MyKB',
//...
});
And then used features: [{ftype:'grouping'}] in the grid.
this._myGrid = Ext.create('Ext.grid.Panel', {
store: myStore,
features: [{ftype:'grouping'}],
//...