Multiple data-bind in knockout js

Ho due dati di proprietà di testo Data e Città sono osservabili. Ho bisogno di concatenare due dati di proprietà di testo in un singolo div. e applica uno stile separato per entrambi i testi. scenario attuale viene utilizzato knockoutjs proprietà data-bind:Multiple data-bind in knockout js

<div class="date" data-bind="text:Date" /> 
<div class="city" data-bind="text:City" />

atteso:

<div class="date city" data-bind=" text:Date text:City" />

uscita: 2013-05-24 New York

per favore mi guida come fare Questo.

fonte

2013-04-24 user2706

Provalo separato da virgola 'data-bind =" testo: Data, testo: Città "' –

Grazie per la risposta.Ho provato con la virgola, verrà visualizzato solo il nome della città. – user2706

C'è davvero un motivo per concentrarsi su un singolo div? come se non usassi 2 span e il problema fosse risolto? – everblack

Non è possibile utilizzare due della stessa associazione su un elemento. Invece, dovresti creare un calcolo che formatta il testo usando i due valori che vuoi visualizzare.

Per esempio (supponendo che il Data e City sono osservabili):

viewModel.DateCity = ko.computed(function() { 
    return viewModel.Date() + " - " + viewModel.City(); 
});

Poi nel data-bind, basta legano alla calcolato.

<div class="date city" data-bind="text:DateCity" />

Un'altra opzione consiste nel combinare direttamente i valori nell'associazione.

<div class="date city" data-bind="text: Date() + ' - ' + City()" />

Personalmente ritengo che l'approccio calcolato sia un modo più pulito.

fonte

2013-04-24 12:04:36

Ho bisogno di applicare lo stile sia per la data che per la città. Nell'esempio precedente DateCity non sono in grado di applicare gli stili. – user2706

Le classi CSS non hanno nulla a che fare con il binding del testo, che controlla solo i dati che vengono visualizzati. Puoi ancora applicare entrambe le classi CSS come sopra. –

Ok grazie. lo proverò – user2706

Per utilizzare stili separati per ogni parte, occorrono elementi HTML separati per associarli a tali stili. Utilizzare un span per ogni parte funzionerebbe.

<div> 
    <span class="date" data-bind="text:Date"></span> 
    <span class="city" data-bind="text:City" ></span> 
</div>

fonte

2013-04-24 12:23:39 Nate

Grazie per la risposta. Funziona ora :-) – user2706

utilizzare il segno "," o "+" per eseguire più binding di dati.

<div class="date city" data-bind=" text:Date(), text: City" /> 


<div class="date city" data-bind=" text:Date() + City" />

fonte

2013-10-24 06:25:25

@radim: credo che ti dimentichi di usare() qui 'data-bind =" testo: Date(), text: City "" penso che dovrebbe essere 'data-bind =" text: Date(), text: City() "' – Mou

Con ko.punches si potrebbe fare

<div class='date city'>{{ Date() }} {{ City }}</div>

Solo un altro opzione con un ottimo plugin.

fonte

2014-09-17 14:04:16

Provare a utilizzare questo formato:

data-bind="text: city() + ', ' + state() + ' ' + zipcode()"

fonte

2014-10-19 17:36:21 WebsiteDesignAndSupport

si potrebbe aggiungere 2 campate o chiamare in questo modo

<div class="date" data-bind="text:Date() +' '+ city()" />

fonte

2015-01-19 18:46:48

Si può semplicemente scrivere: -

data-bind = "text: Date() + City()"

E se si vuole per aggiungere qualsiasi stringa ex: - 2013-05-24: New York, è possibile codice come:

data-bind = "text: Date() + ':' + City()"

In questo modo ha funzionato per me.

fonte

2016-02-23 09:53:36

Multiple data-bind in knockout js

risposta

Problemi correlati