Tag ikon biasa biasanya digunakan dengan cara ini:

<i class="fa fa-cultery"></i>

Tetapi untuk beberapa alasan saya mencoba menyimpan nama kelas ikon di dalam viewModel seperti:

        self.interviewScheduleIconOptions = [
            "icon-chair",
            "icon-clock",
            "icon-dollar",
            "icon-monitor",
            "icon-star",
            "icon-subway",
        ];

Dan mencoba melakukan sesuatu seperti

<i data-bind="attr: {class: $data}"></i>

Sebelum ini, saya mencoba untuk menguji

Untuk melihat apakah itu berfungsi dengan data-bind.

Ikon tidak muncul dan ketika saya memeriksa HTML, itu memberi saya:

<i data-bind="attr: {class: 'fa fa-cultery'}" class="fa fa-cultery"></i>

Jadi itu memberi kelas yang tepat, tetapi ikonnya tidak muncul.

Ada ide?

0
Dukakus17 9 Agustus 2017, 20:15

2 jawaban

Jawaban Terbaik

Silakan coba <i data-bind="attr: {'class': $data}"></i> yang berarti kutipan tunggal di sekitar kelas

Alasan

Karena, class bukan nama variabel javascript resmi Catatan: Menerapkan atribut yang namanya bukan nama variabel JavaScript legal

Jika Anda ingin menerapkan atribut data-something, Anda tidak dapat menulis ini:

<div data-bind="attr: { data-something: someValue }">...</div>

… karena data-something bukan nama pengenal resmi pada saat itu. Solusinya sederhana: cukup bungkus nama pengenal dalam tanda kutip sehingga menjadi string literal, yang legal dalam objek JavaScript literal. Sebagai contoh,

<div data-bind="attr: { 'data-something': someValue }">...</div>
2
Om Sao 9 Agustus 2017, 17:28

Anda tampaknya mengacu pada dua versi berbeda dari font-awesome. Kelas seperti fa fa-search milik FA 4.7.2. Sementara kelas seperti icon-search milik versi 3.2.1

Anda dapat menggunakan pengikatan css yang dimaksudkan untuk digunakan untuk kelas CSS.

<i data-bind="css: $root.class"></i>

Font-Mengagumkan 4.7.2

var Model = function() {
  var self= this;
  
  self.class= ko.observable( "fa fa-search");
}

ko.applyBindings(new Model());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<i data-bind="css: $root.class"></i>

Font-Mengagumkan 3.2.1

var Model = function() {
  var self= this;
  
  self.class= ko.observable( "icon-search");
  
  self.interviewScheduleIconOptions = ko.observableArray([
            "icon-chair",
            "icon-clock",
            "icon-dollar",
            "icon-monitor",
            "icon-star",
            "icon-subway",
        ]);
}

ko.applyBindings(new Model());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>

<i data-bind="css: $root.class"></i>

<span data-bind="foreach: interviewScheduleIconOptions">
  <br/>
  <span data-bind="text: ($index() + 1)"></span>
  <i data-bind="css: $data"></i>
</span>
0
Nisarg 9 Agustus 2017, 17:59