Align с помощью Twitter Bootstrap и KnockoutJS

-1

Как выровнять список флажок, как это:Align с помощью Twitter Bootstrap и KnockoutJS

Мой текущий код:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <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"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script> 
</head> 

<body> 
<h2>sample calendar</h2> 

<div class="container-fluid"> <!-- this is to make it responsive to your screen width--> 
    <div class="row" style="font-size: 12px;background-color: white; border:inset 1px black;padding-left: 21px;margin-top:8px;"> 
     <div data-bind="template: { name: 'month_template_every', foreach: cal_week }"></div> 
    </div> 
</div> 

<script id="month_template_every" type="text/html"> 
     <div class="row"> 
      <input type="checkbox" name="cal_month" style="outline: 0" data-bind="attr: { id: 'check_month_' + ($index()+1), value:$data }" /> 
       <label class="notbold label-style" data-bind="text: $data.charAt(0).toUpperCase() + $data.slice(1) ,attr: { for: 'check_month_' + ($index()+1)}"></label> 
     </div> 
</script> 

<script type="text/javascript"> 
     function MyViewModel() { 

      szWeekArray = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th", "11th", "12th", "13th", "14th", "15th", "16th", "17th", "18th", "19th", "20th", "21st", "22nd", "23rd", "24th", "25th", "26th", "27th", "28th", "29th", "30th", "31st", "32nd", "33rd", "34th", "35th", "36th", "37th", "38th", "39th", "40th", "41st", "42nd", "43rd", "44th", "45th", "46th", "47th", "48th", "49th", "50th", "51st"]; 

      this.cal_week = ko.observableArray(szWeekArray); 
     } 
     ko.applyBindings(new MyViewModel()); 
</script> 

</body> 
</html>

источник

2016-02-29 Aswathy

Я думаю, вы должны смешивать как логику кодирования, так и CSS. Как и на экране, первый 17item приходит в первую колонку, скажем

, а во втором столбце вы должны вставить еще один набор флажков и так далее. –

Вы должны выбрать предпочтительный метод splitting your array in chunks и настроить просмотра и просмотра модели.

Во-первых, ваша модель представления должна быть изменена вдоль этих линий:

function MyViewModel() { 
    var self = this; 
    var szWeekArray = ["1st", "2nd", "3rd", "4th", "5th", "6th", "7th", "8th", "9th", "10th", "11th", "12th", "13th", "14th", "15th", "16th", "17th", "18th", "19th", "20th", "21st", "22nd", "23rd", "24th", "25th", "26th", "27th", "28th", "29th", "30th", "31st", "32nd", "33rd", "34th", "35th", "36th", "37th", "38th", "39th", "40th", "41st", "42nd", "43rd", "44th", "45th", "46th", "47th", "48th", "49th", "50th", "51st"]; 
    self.cal_week = ko.observableArray(szWeekArray); 
    self.cal_week_chunks = ko.computed(function() { 
    // Pseudo-code, choose your chunkify method from linked question 
    return self.cal_week().chunkify(17); 
    }); 
}

А затем связываются с новым cal_week_chunkscomputed наблюдаемом обернуть вещи:

<div class="column" data-bind="foreach: cal_week_chunks"> 
    <div data-bind="template: { name: 'month_template_every', foreach: $data }"></div> 
</div>

и стиль вашего .column к Вашим пожеланиям (например, с inline-block).

источник

2016-02-29 07:35:49 Jeroen

Align с помощью Twitter Bootstrap и KnockoutJS

ответ

Смежные вопросы