Der Benutzer muss einen Radiobutton auswählen. Mein Label muss den Wert des ausgewählten Optionsfelds haben, um später in einem Textfeld angezeigt zu werden. Ich brauche auch den Wert des Radiobuttons, der in der Ajax "title" -Variable gespeichert wird, damit ich ihn im Backend (Python - Flask) verwenden kann. Wenn ich auf die Schaltfläche zum Migrieren klicke, wird mein Ajax-Anruf ausgeführt.Wie verwendet man mehrere geprüfte Daten-bindet auf einem einzigen Radio-Button mit KnockoutJS?
Ich lese, dass ich Kommas nur zwischen Datenbindungen setzen kann, aber indem es tut, bricht es meinen Code, wo die Radio-Tasten nicht funktionieren. Wenn ich jedoch nur data-bind="checked: $data.title" mache, dann funktioniert mein Ajax-Anruf, aber mein Etikett bleibt leer (aus offensichtlichen Gründen).
Wie bekomme ich es, damit ich zwei überprüfte Daten-Bindungen auf meinen Optionsfeldern verwenden kann, damit meine Label-Updates und meine Ajax-Aufrufe funktionieren? Oder gibt es eine andere Lösung, die ich vermisse?
Mein Kopf
<!DOCTYPE html>
<html>
<script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.0.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/json2/20150503/json2.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
{% extends "layout.html" %}
{% block content %}
<div id="tab">
My Radio Buttons
<td id="myRadioFrom" class="label">From:</td>
<td>
<label><input type="radio" value="DevQ" name="from" data-bind="checked: $data.title, checked: radioFrom" />DevQ</label>
<label><input type="radio" value="Dev2" name="from" data-bind="checked: $data.title, checked: radioFrom" />Dev2</label>
</td>
My Label
<tr>
<td class="label">From:</td>
<td data-bind="text: radioFrom"></td>
</tr>
My Button
<form>
<span class="migrate"><button data-bind="click: $data.add" type="submit" class="btn btn-default" value="Migrate!" data-dismiss="modal">Migrate!</button></span>
</form>
Mein Javascript/KnockoutJS
<script>
var TabViewModel = function(){
var self = this;
//Set href value of element
self.selected = ko.observable(null);
self.tasksURI = 'http://localhost:5000/todo/api/v1.0/tasks'; // Use to get root access to server
self.username = "";
self.password = "";
self.tasks = ko.observableArray();
self.radioFrom = ko.observable("");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
controls.onchange = function() {
console.log(viewModel.radioFrom());
}
self.ajax = function(uri, method, data)
{
var request =
{
url: uri,
type: method,
contentType: "application/json",
accepts: "application/json",
cache: false,
dataType: 'json',
data: JSON.stringify(data),
// beforeSend is invoked by jQuery, used to send a jqXHR object to get a request from $.aJax
beforeSend: function (xhr)
{
xhr.setRequestHeader("Authorization",
"Basic " + btoa(self.username + ":" + self.password));
},
// if $.aJax request comes back with an error such as invalid username
error: function(jqXHR)
{
console.log("ajax error " + jqXHR.status);
}
};
return $.ajax(request); // Returns value of the $.aJax request
}
self.add = function(task)
{
self.ajax(self.tasksURI, 'POST', task).done(function(data)
{
self.tasks.push
({
uri: ko.observable(data.task.uri),
title: ko.observable(data.task.title),
description: ko.observable(data.task.description),
done: ko.observable(data.task.done)
});
});
}
};
window.viewModel = new TabViewModel();
ko.applyBindings(window.viewModel, $('#tab')[0]);
</script>
Mein aktueller 'ko.applybindings' sieht wie folgt aus' ko.applyBindings (window.viewModel, $ ('# tab') [0]); '. Wie soll ich Bindungen in meinem Szenario anwenden? – ButterJones
Sie können einfach 'var tabViewModel = new TabViewModel();' und dann 'ko.applyBindings (tabViewModel, document.getElementById (tab));' –
Ich bekomme diesen Fehler, wenn ich versuche, was Sie oben haben ... ' knockout-min.js: 63 Uncaught ReferenceError: Binding kann nicht verarbeitet werden "checked: function() {return title}" Nachricht: title is not defined'. Wie soll ich das beheben? – ButterJones