Hi I have the following html:
<div id="div1">
<input id="input1" data-bind="value: inputIn, valueUpdate: 'afterKeydown'" >
// ... more stuff between
</div>
<div id="div2">
<input id="input2" data-bind="value: inputOut">
// .... more stuff between
</div>
My model is this:
function MyModel() {
"use strict";
this.inputIn = ko.observable("");
this.inputOut = ko.computed(function() {
return transformOutput(this.inputIn());
}
}
Applying the bindings:
var myModel = new MyModel();
ko.applyBindings(model, document.getElementById("div2"));
ko.applyBindings(model, document.getElementById("div1"));
I want changes in input 1 to effect input 2. What is wrong? Is their way around this without changing the html. The element are in two different divs and I want the knockout binding to apply to be apply across cross root domain.
Your problem isn't with how you are binding it (although I don't think it's worth the trouble). Your problem is that this isn't what you think it is in the computed property (it's actually window).
Try this:
function MyModel() {
var self = this;
this.inputIn = ko.observable("");
this.inputOut = ko.computed(function () {
return transformOutput(self.inputIn());
});
}
Here's a simple fiddle
Related
I am currently building a form builder with vue3 composition API. The user can add in different types of inputs like text, radio buttons etc into the form before saving the form. The saved form will then render with the appropriate HTML inputs. The user can edit the name of the question, eg Company Name <HTML textInput.
Currently, when the user adds an input type eg,text, the type is saved into an ordered array. I run a v-for through the ordered array and creating a custom component formComponent, passing in the type.
My formComponent renders out a basic text input for the user to edit the name of the question, and a place holder string for where the text input will be displayed. My issue is in trying to save the question text from the parent.
<div v-if="type=='text'">
<input type="text" placeholder="Key in title"/>
<span>Input field here</span>
</div>
I have an exportForm button in the parent file that when pressed should ideally return an ordered array of toString representations of all child components. I have tried playing with $emit but I have issue triggering the $emit on all child components from the parent; if I understand, $emit was designed for a parent component to listen to child events.
I have also tried using $refs in the forLoop. However, when I log the $refs they give me the div elements.
<div v-for="item in formItems" ref="formComponents">
<FormComponent :type="item" />
</div>
The ideal solution would be to define a method toString() inside each of the child components and have a forLoop running through the array of components to call toString() and append it to a string but I am unable to do that.
Any suggestions will be greatly appreciated!
At first:
You don't really need to access the child components, to get their values. You can bind them dynamically on your data. I would prefer this way, since it is more Vue conform way to work with reactive data.
But I have also implemented the other way you wanted to achieve, with accessing the child component's methods getValue().
I would not suggest to use toString() since it can be confused with internal JS toString() function.
In short:
the wrapping <div> is not necessary
the refs should be applied to the <FormComponents> (see Refs inside v-for)
this.$refs.formComponents returns the Array of your components
FormComponent is used here as <form-components> (see DOM Template Parsing Caveats)
The values are two-way bound with Component v-model
Here is the working playground with the both ways of achieving your goal.
Pay attention how the values are automatically changing in the FormItems data array.
const { createApp } = Vue;
const FormComponent = {
props: ['type', 'modelValue'],
emits: ['update:modelValue'],
template: '#form-component',
data() {
return { value: this.modelValue }
},
methods: {
getValue() {
return this.value;
}
}
}
const App = {
components: { FormComponent },
data() {
return {
formItems: [
{ type: 'text', value: null },
{ type: 'checkbox', value: false }
]
}
},
methods: {
getAllValues() {
let components = this.$refs.formComponents;
let values = [];
for(var i = 0; i < components.length; i++) {
values.push(components[i].getValue())
}
console.log(`values: ${values}`);
}
}
}
const app = createApp(App)
app.mount('#app')
#app { line-height: 2; }
[v-cloak] { display: none; }
label { font-weight: bold; }
th, td { padding: 0px 8px 0px 8px; }
<div id="app">
<label>FormItems:</label><br/>
<table border=1>
<thead><tr><th>#</th><th>Item Type:</th><th>Item Value</th></tr></thead>
<tbody><tr v-for="(item, index) in formItems" :key="index">
<td>{{index}}</td><td>{{item.type}}</td><td>{{item.value}}</td>
</tr></tbody>
</table>
<hr/>
<label>FormComponents:</label>
<form-component
v-for="(item, index) in formItems"
:type="item.type" v-model="item.value" :key="index" ref="formComponents">
</form-component>
<button type="button" #click="getAllValues">Get all values</button>
</div>
<script src="https://unpkg.com/vue#3/dist/vue.global.prod.js"></script>
<script type="text/x-template" id="form-component">
<div>
<label>type:</label> {{type}},
<label>value:</label> <input :type='type' v-model="value" #input="$emit('update:modelValue', this.type=='checkbox' ? $event.target.checked : $event.target.value)" />
</div>
</script>
I have a demo when on click it changes the class back and worth, but I can't figure it out how to change them separately.
Here's a demo for better explanation: http://jsfiddle.net/pWG2S/1260/
I could add similar line of code to the js with class2, class3 etc, but the problem is that this class will be repeated a lot of times. If you have any ideas on how to fix this problem that would be great. Thank you in advance
$scope.changeClass = function(){
if ($scope.class === "rotated")
$scope.class = "rotated2";
else
$scope.class = "rotated";
};
Just change class to be an array and then pass each index:
$scope.changeClass = function(i){
if ($scope.class[i] === "red")
$scope.class[i] = "blue";
else
$scope.class[i] = "red";
};
Fiddle here
HTML:
<body ng-app="ap" ng-controller="con">
<div ng-class="class">{{class}}</div>
<button id="button1" ng-click="changeClass($event)">Change Class</button>
<div ng-class="class1">{{class1}}</div>
<button id="button2" ng-click="changeClass($event)">Change Class</button>
</body>
JS:
var app = angular.module("ap",[]);
app.controller("con",function($scope){
$scope.class = "red";
$scope.class1 = "red";
$scope.changeClass = function(event){
console.log(event.currentTarget.id);
if(event.currentTarget.id === "button1")
if ($scope.class === "red")
$scope.class = "blue";
else
$scope.class = "red";
else if(event.currentTarget.id === "button2")
if ($scope.class1 === "red")
$scope.class1 = "blue";
else
$scope.class1 = "red";
};
});
Fiddle
I should have refactored the code a bit more. However my initial idea is that you will need to pass in $event along with your ng-click and provide id's to button in order to uniquely identify them through event.currentTarget.id
Also the fiddle of Nghi Nguyen makes more sense to do it with directive since your same set of elements for twice. Encapsulate them inside a directive. This way you don't even have to use $event to determine your button's id and the controller will only handle changeClass for a particular directive.
EDIT1:
var app = angular.module("ap",[]);
app.controller("con",function($scope){
$scope.class = "red"; // default class
$scope.changeClass = function($event){
if ($($event.target).prev().hasClass('red')) {
$($event.target).prev().removeClass('red').addClass('blue');
} else {
$($event.target).prev().removeClass('blue').addClass('red');
}
};
});
HTML:
<body ng-app="ap" ng-controller="con">
<div ng-class="class">{{class}}</div>
<button ng-click="changeClass($event)">Change Class</button>
<div ng-class="class">{{class}}</div>
<button ng-click="changeClass($event)" >Change Class</button>
</body>
How about this?
Controller
var app = angular.module("ap",[]);
app.controller("con",function($scope){
$scope.klasses = ["red", "blue", "yellow"];
$scope.klassIndex = 0;
$scope.changeClass = function(){
var newKlassIndex = ($scope.klassIndex+1)%$scope.klasses.length;
$scope.klassIndex = newKlassIndex;
};
});
View
<body ng-app="ap" ng-controller="con">
<div ng-repeat="klass in klasses">
<div ng-class="klasses[klassIndex]">{{klasses[klassIndex]}}</div>
<button ng-click="changeClass()">Change Class</button>
</div>
</body>
This way new class can be added to $scope.klasses, with new corresponding CSS rule.
Working Demo
http://jsfiddle.net/pWG2S/1267/
Let think about make directive for each section :
<div ng-class="class">{{class}}</div>
<button ng-click="changeClass()">Change Class</button>
Then you can control scope inside each directive and it will be easy for you to extend later.
This is example : http://jsfiddle.net/pWG2S/1271/
I have got a list and I want to apply a different style to each item depending on it's Id. Below is my attempt to do that but unfortunately something is wrong. Any help will be very appreciated.
#foreach (var item in Model)
{
#if (#item.Id==0)
{
var css = "background-color:Aqua";
}
else if (#item.Id==1)
{
var css = "background-color:Red";
}
else
{
var css = "background-color:Green";
}
<div style="#css" class="box">
#item.Info
</div>
<div>
#item.Name
</div>
}
Your if condition is already in a code block(foreach code..). So no need of # . Also define the css varibale outside of your if-else blocks
#foreach (var item in Model)
{
var css="background-color:Green";
#if (#item.Id==0)
{
css = "background-color:Aqua";
}
else if (#item.Id==1)
{
css = "background-color:Red";
}
<div style="#css" class="box"> #item.Info </div>
<div> #item.Name </div>
}
Another solution is creating a css class name string inside your loop using your item.Id or item.Code(if that exists) and using that in your markup. With this approach, you may completely eliminate the if condition checking in your razor code, thus making this a much cleaner solution than the previous one.
#foreach (var item in Model)
{
<div class="box myClass-#item.Id">
#item.Name
</div>
<div> #item.Name </div>
}
And in your css class add the css classes as needed
.myClass-0
{
background-color:aqua;
}
.myClass-1
{
background-color:red;
}
.myClass-2
{
background-color:green;
}
Id's might change, so i recommend using some other properties like Code/Name etc.
First of all try setting a default style and bring var css out of the if block, then set the value according to your needs.
But you can also try a helper for that:
#helper styler(int id, String value){
var bg = "background-color:white" // as default
if(id == 1){
bg = "Another color";
}
else if (id == 2) {
// continue setting values
}
<span style="#bg">#value</span>
}
However, this is not really necessary as you can set the style inside of the for loop, but this approach reduce some code duplication.
I have a scrollspy directive that adds an ".active" class to a nav item. When the first nav item has the ".active" class I want my header bar to contain a certain class too. Attached is a simplified example, but how can I add ".active" to item 1 by only looking at the classes in item 2. jsfiddle
<div ng-app>
<div ng-controller='ctrl'>
<div id="item1" ng-class="if item2 has class=active then add active class here">Item 1</div>
<div id="item2" ng-class="myVar">Item 2</div>
</div>
//I can't use a scope object I can only look at item 2's classes
<button type="button" ng-click="myVar='active'">Add Class</button>
<button type="button" ng-click="myVar=''">Remove Class</button>
Click here for live demo.
You'll need a directive to interact with the element. I would have the directive watch the element's classes and have it call a function from your controller when the classes change. Then, your controller function can apply the logic specific to your need, which is to set a flag letting another element know how to respond.
angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
$scope.foo = function(classes) {
if (~classes.indexOf('active')) {
$scope.otherItemIsActive = true;
}
};
})
.directive('onClassChange', function() {
return {
scope: {
onClassChange: '='
},
link: function($scope, $element) {
$scope.$watch(function() {
return $element[0].className;
}, function(className) {
$scope.onClassChange(className.split(' '));
});
}
};
})
;
Is it possible to bind a state (attribute) of a paper-checkbox [checked|unchecked] dynamically to an attribute like [readonly|disabled] inside a paper-input element? This is my implementation so far:
<template repeat="{{item in lphasen}}">
<div center horizontal layout>
<paper-checkbox unchecked on-change="{{checkStateChanged}}" id="{{item.index}}"></paper-checkbox>
<div style="margin-left: 24px;" flex>
<h4>{{item.name}}</h4>
</div>
<div class="container"><paper-input disabled floatingLabel id="{{item.index}}" label="LABEL2" value="{{item.percent}}" style="width: 120px;"></paper-input></div>
</div>
</template>
The behavior should be as follow:
When the user uncheck a paper-checkbox, then the paper-input element in the same row should be disabled and/or readonly and vice versa. Is it possible to directly bind multiple elements with double-mustache or do I have to iterate the DOM somehow to manually set the attribute on the paper-input element? If YES, could someone explain how?
Another way to bind the checked state of the paper-checkbox.
<polymer-element name="check-input">
<template>
<style>
#checkbox {
margin-left: 1em;
}
</style>
<div center horizontal layout>
<div><paper-input floatingLabel label="{{xlabel}}" value="{{xvalue}}" disabled="{{!xenable}}" type="number" min="15" max="200"></paper-input></div>
<div><paper-checkbox id="checkbox" label="Enable" checked="{{xenable}}"></paper-checkbox></div>
</div>
</template>
<script>
Polymer('check-input', {
publish:{xenable:true, xvalue:'',xlabel:''}
});
</script>
</polymer-element>
<div>
<check-input xenable="true" xvalue="100" xlabel="Weight.1"></check-input>
<check-input xenable="false" xvalue="185" xlabel="Weight.2"></check-input>
</div>
jsbin demo http://jsbin.com/boxow/
My preferred approach would be to refactor the code to create a Polymer element responsible for one item. That way, all of the item specific behaviour is encapsulated in one place.
Once that is done, there are a couple ways of doing this.
The easiest would be to simply create an on-tap event for the check box that toggles the value of a property and sets the disabled attribute accordingly.
<paper-checkbox unchecked on-tap="{{checkChanged}}"></paper-checkbox>
//Other markup for item name display
<paper-input disabled floatingLabel id="contextRelevantName" style="width:120 px;"></paper-input>
One of the benefits of putting this into it's own polymer element is that you don't have to worry about unique id's anymore. The control id's are obfuscated by the shadowDOM.
For the scripting, you would do something like this:
publish: {
disabled: {
value: true,
reflect: false
}
}
checkChanged: function() {
this.$.disabled= !this.$.disabled;
this.$.contextRelevantName.disabled = this.$.disabled;
}
I haven't tested this, so there might be some tweaks to syntax and what have you, but this should get you most of the way there.
Edit
Based on the example code provided in your comment below, I've modified your code to get it working. The key is to make 1 element that contains an either row, not multiple elements that contain only parts of the whole. so, the code below has been stripped down a little bit to only include the check box and the input it is supposed to disable. You can easily add more to the element for other parts of your item displayed.
<polymer-element name="aw-leistungsphase" layout vertical attributes="label checked defVal contractedVal">
<template>
<div center horizontal layout>
<div>
<paper-checkbox checked on-tap="{{checkChanged}}" id="checkbox" label="{{label}}"></paper-checkbox>
</div>
<div class="container"><paper-input floatingLabel id="contractedInput" label="Enter Value" value="" style="width: 120px;"></paper-input></div>
</div>
</template>
<script>
Polymer('aw-leistungsphase', {
publish: {
/**
* The label for this input. It normally appears as grey text inside
* the text input and disappears once the user enters text.
*
* #attribute label
* #type string
* #default ''
*/
label: '',
defVal : 0,
contractedVal : 0
},
ready: function() {
// Binding the project to the data-fields
this.prj = au.app.prj;
// i18n mappings
this.i18ndefLPHLabel = au.xlate.xlate("hb.defLPHLabel");
this.i18ncontractedLPHLabel = au.xlate.xlate("hb.contractedLPHLabel");
},
observe : {
'contractedVal' : 'changedLPH'
},
changedLPH: function(oldVal, newVal) {
if (oldVal !== newVal) {
//this.prj.hb.honlbl = newVal;
console.log("Geänderter Wert: " + newVal);
}
},
checkChanged: function(e, detail, sender) {
console.log(sender.label + " " + sender.checked);
if (!this.$.checkbox.checked) {
this.$.contractedInput.disabled = 'disabled';
}
else {
this.$.contractedInput.disabled = '';
}
console.log("Input field disabled: " + this.$.contractedInput.disabled);
}
});
</script>
</polymer-element>