trying to use the FlipView control in WinJS and having some issues. I am able to bind it to a datasource and get the URL/picture property show up in the flipview control content pane but it fails to load the picture - any suggestions :(
I have made sure that src property of the image tags points to the URL/picture property. I am able to load the image via a normal img tag.
listed below is the template definition and data source - as always, appreciate any pointers :)
datasource:
var dataArray = [
{ type: "item", title: "Hole 1", picture: "/images/IMG_0550.jpg" },
{ type: "item", title: "Hole 2", picture: "/images/IMG_0564.jpg" },
{ type: "item", title: "Hole 3", picture: "/images/IMG_0572.jpg" },
{ type: "item", title: "Hole 4", picture: "/images/IMG_0594.jpg" },
{ type: "item", title: "Hole 5", picture: "/images/IMG_0605.jpg" }
];
var dataList = new WinJS.Binding.List(dataArray);
// Create a namespace to make the data publicly
// accessible.
WinJS.Namespace.define("ImageData", {
bindingList: dataList,
array: dataArray
});
flipview binding:
Gallery content goes here.
<div id="simple_ItemTemplate" data-win-control="WinJS.Binding.Template">
<div>
<img src="#" data-win-bind="src: picture; alt: title" />
<div>
<h2 data-win-bind="innerText: title"></h2>
</div>
</div>
</div>
<div id="basicFlipView"
data-win-control="WinJS.UI.FlipView"
data-win-options="{ itemDataSource : ImageData.bindingList.dataSource, itemTemplate : simple_ItemTemplate }">
</div>
</section>
use itemTemplate : select('#simple_ItemTemplate') instead of `itemTemplate : simple_ItemTemplate'
It is good to set template and datasource in code to avoid typo error and code can be debugged also.
basicFlipView.winControl.itemTemplate = simple_ItemTemplate;
basicFlipView.winControl.itemDataSource = dataList;
I do not agree with ankur comment, from my POV, databinding and MVVM is the way to go.
About your question, run the project and use DOM explorer to see what get generated, also use a class instead of an id as template identifier (since it gets generated multiple times)
Related
I have some tooltips that are set up like this:
HTML:
<button id="myButton" title="This is a tooltip">My Button</button>
Javascript:
tippy('#myButton', {
content: "Some stuff",
});
Is there any way I can set the content: to use the contents of the title= attribute as the contents of the tooltip?
Based on the documentation, you can use reference.getAttribute('title')
Ex.:
tippy('#myButton, {
content: (reference) => reference.getAttribute('title'),
});
I am trying to create a dropdown (v-select/q-select (using quasar)), which allows me to select from an array in my vuex-storage and then eventually save the selected item (content of it) in a variable. Currently I have no problem to access the vuex-storage, but face the problem, that the v-select expects a string and not an object.
My code looks like the following.
// vuex storage:
const state = {
savedsystems:
[
id: "1",
system: {...}
],
[
id: "2",
system: {...}
]
// example of the vuex storage out of my viewdevtools
systemsconstant: Object
savedsystems:Array[2]
0:Object
id:"first"
system:Object
7a73d702-fc28-4d15-a54c-2bb950f7a51c:Object
name:"3"
status:"defined"
88519419-8a81-48f1-a5e6-5da77291b848:Object
name:"5"
status:"not defined"
1:Object
id:"second"
system:Object
7a73d702-fc28-4d15-a54c-2bb950f7a51c:Object
name:"3"
status:"not defined"
88519419-8a81-48f1-a5e6-5da77291b848:Object
name:"9"
status:"defined"
}
// dropdown:
<q-select
outlined
dense
emit-value
:value="currentsystem"
:options="savedsystems"
label="selectsystem" />
// computed to get systems from vuex:
computed: {
savedsystems() {
return this.$store.getters['systemsconstant/getsavedsystems']
}
},
I used the following example https://codepen.io/sagalbot/pen/aJQJyp as inspiration and tried a couple of different setups stringifying resulting in nothing really.
If one would try to apply my case to a similar problem (v-select displays object Object), the mentioned formatlabel would be an object instead of a string.
Question:
How can I modify the (with a getter) imported array of objects "savedsystems", so it can be used both as label to select it and furthermore then to connect it properly to the values, so I can save the selected as a variable.
Or can I change something in my v-select, e.g. varying what comes behind :options/options?
I'd appreciate any help!
You should use the property option-label
<div id="q-app">
<div class="q-pa-md" style="max-width: 300px">
<div class="q-gutter-md">
<q-badge color="secondary" multi-line>
Model: "{{ model }}"
</q-badge>
<q-select filled v-model="model" :options="options" label="Standard" option-label="description"></q-select>
{{ model }}
</div>
</div>
</div>
JS:
new Vue({
el: '#q-app',
data () {
return {
model: null,
options: [
{
label: 'Google',
value: 'Google',
description: 'Search engine',
category: '1'
},
{
label: 'Facebook',
value: 'Facebook',
description: 'Social media',
category: '1'
},
{
label: 'Twitter',
value: 'Twitter',
description: 'Quick updates',
category: '2'
},
]
}
}
})
https://codepen.io/reijnemans/pen/bGpqJYx?editors=1010
I'm really struggling on how to implement a pattern inline with the "Vue philosophy".
Imagine a list of items that you'd like to edit. There are numerous examples of how to edit those items "inline". But I'd like to edit my items through the same, persistent form. So when you click a list item, the form input "rebinds" to clicked list item.
Here's a working example: http://jsbin.com/sopakid/3/edit?html,js,output which uses a method (updateRecord) to copy the form input (bound to editRecord), to the referenced li's data binding (messages[index]).
data: {
messages: [
{ name: "Dale Cooper", message: "Black as midnight on a moonless night" },
{ name: "Shelly Johnson", message: "I've got one man too many in my life and I'm married to him." },
{ name: "Sheriff Truman", message: "Jelly donuts?"}
],
editRecord:
{ name: "", message: "" }
},
updateRecord: function(){
var index = this.editRecord.index;
this.messages[index].name = this.editRecord.name;
this.messages[index].message = this.editRecord.message;
}
Looking for any insight as to how to better implement this pattern. Thanks!
Idiomatically, you don't really need any methods in this case. You can set the editRecord directly in the template. Additionally, if you set the editRecord to the selected message, then you don't even need an update button or a need to keep track of the index.
var app = new Vue({
el: '#app',
data: {
editRecord:{ name: null, message: null },
messages: [
{ name: "Dale Cooper", message: "Black as midnight on a moonless night" },
{ name: "Shelly Johnson", message: "I've got one man too many in my life and I'm married to him." },
{ name: "Sheriff Truman", message: "Jelly donuts?"}
]
}
});
These are the changes I made to your template
<div id="app">
<div class="messages">
<ul>
<li class="message" v-for="(message, index) in messages" #click="editRecord = message">
<div class="message__name">
{{message.name}}
</div>
<div class="message__body">
{{message.message}}
</div>
</li>
</ul>
</div>
<div class="edit-form" v-if="editRecord">
<label for="name">Name</label>
<input name="name" type="text" placeholder="Name" v-model="editRecord.name">
<label for="message">Message</label>
<textarea name="message" id="" cols="30" rows="6" v-model="editRecord.message"></textarea>
</div>
</div>
Here is your fiddle updated.
The result takes advantage of Vue's reactivity and as you edit in your form you can see the changes taking place in the list as well.
Some people may like the approach you've taken though, where the edits they make are not complete until they specify they are. A lot of this is a matter of taste.
I would warn against using index to track your selected record, however. If the list changes underneath you, the indexes change. Use an id property on your messages. If you go with the reactive approach though, you don't really need that.
I am pretty new to web based applications development.I am using ASP.Net MVC4 with dojo toolkit. My requirement is like I have certain textboxes to capture data and also one dojo grid to capture certain details which are in a tabular format. So I am using Dojo grid(http://dojotoolkit.org/api/1.8/dojox/grid/DataGrid) with ItemFileWriteStore. My view is like below(I am using razor)
#using (Html.BeginForm("CreateNewData", "Home", FormMethod.Post, new { id = "myForm" }))
{
<div class="controlWrapper">
<div class="controlLabel">
#Html.DisplayNameFor(model => model.Name)
</div>
<div class="controlValue">
#Html.TextBoxFor(model => model.Name)
</div>
</div>
<div class="controlWrapper">
<h4>
Table Items</h4>
<div id="myGrid">
</div>
<div id="addRemoveMode">
<button data-dojo-type="dijit.form.Button" id="addButton" onclick="addRecord()">
Add</button>
<button data-dojo-type="dijit.form.Button" id="removeButton" onclick="removeRecord()">
Remove Selected Rows
</button>
</div>
</div>
}
My java script to create grid is like below
require(["dojo/ready",
"dojox/grid/DataGrid",
"dojo/data/ItemFileWriteStore",
"dojo/json",
"dojo/query",
"dijit/form/TextBox"
], function (ready, DataGrid, ItemFileWriteStore, Json, query, TextBox) {
ready(function () {
var layout = [[
{ name: 'ID', field: 'ID', hidden: true },
{ name: 'Label', field: 'Label', width: '10%', editable: true },
{ name: 'Position', field: 'Position', width: '10%', editable: true }
]];
var attCodeData = {
identifier: 'ID',
items: []
};
console.log(globalVar);
attCodeData["items"] = globalVar;
myStore= new ItemFileWriteStore({ data: attCodeData })
myGrid= new DataGrid({
store: myStore,
structure: layout,
rowSelector: '20px'
},"divGrid");
myGrid.startup();
}
My problem is since the grid is inside the form, whenever I add or remove a row, page is getting submitted to Post method mentioned in form. I just need to post the whole data so that I can process together. So I moved my grid outside Form. Now I am confused how to capture the whole data(data in text boxes and grid together) and submit to a controller method. Please help me.
To preventing whole page from getting submitted to Post method, you should use ajax solutions for sending and receiving data.
Take a look at this :DataGrid View with "CRUD operations" using Dojo DataGrid, JsonRest Store, Entity Framework, SQL Server, ASP.NET MVC Web API
and this: Ajax with dojo/request. I hope, they help.
I have this code but the label does not show up:
var radioOne = new RadioButton({
label: "Current",
style: "margin-left:10px",
checked: true
}).placeAt(userDiv);
Do I have to do a domCreate of an actual label tag?
I've gone ahead and am using this to create the label tag.
var label = domConstruct.create("label", {
for: "Previous",
style: "margin-left:5px",
innerHTML: "Previous"
}, userDiv);
this does work but seems this should be included in the RadioButton widget.
Yes you do. This was from the dojo documentations:
Script:
var radioOne = new RadioButton({
checked: true,
value: "tea",
name: "drink",
}, "radioOne");
HTML:
<input type="radio" name="drink" id="radioOne" checked value="tea"/> <label for="radioOne">Tea</label>