kandi background
Explore Kits

knockout | Knockout makes it easier to create rich, responsive UIs | Model View Controller library

 by   knockout JavaScript Version: v3.5.1 License: Non-SPDX

 by   knockout JavaScript Version: v3.5.1 License: Non-SPDX

Download this library from

kandi X-RAY | knockout Summary

knockout is a JavaScript library typically used in Architecture, Model View Controller, Vue, jQuery, Framework applications. knockout has no bugs, it has no vulnerabilities and it has medium support. However knockout has a Non-SPDX License. You can install using 'npm i knockout' or download it from GitHub, npm.
Knockout is a JavaScript MVVM (a modern variant of MVC) library that makes it easier to create rich, desktop-like user interfaces with JavaScript and HTML. It uses observers to make your UI automatically stay in sync with an underlying data model, along with a powerful and extensible set of declarative bindings to enable productive development.
Support
Support
Quality
Quality
Security
Security
License
License
Reuse
Reuse

kandi-support Support

  • knockout has a medium active ecosystem.
  • It has 9999 star(s) with 1566 fork(s). There are 551 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 289 open issues and 1526 have been closed. On average issues are closed in 408 days. There are 73 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of knockout is v3.5.1
knockout Support
Best in #Model View Controller
Average in #Model View Controller
knockout Support
Best in #Model View Controller
Average in #Model View Controller

quality kandi Quality

  • knockout has 0 bugs and 0 code smells.
knockout Quality
Best in #Model View Controller
Average in #Model View Controller
knockout Quality
Best in #Model View Controller
Average in #Model View Controller

securitySecurity

  • knockout has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • knockout code analysis shows 0 unresolved vulnerabilities.
  • There are 0 security hotspots that need review.
knockout Security
Best in #Model View Controller
Average in #Model View Controller
knockout Security
Best in #Model View Controller
Average in #Model View Controller

license License

  • knockout has a Non-SPDX License.
  • Non-SPDX licenses can be open source with a non SPDX compliant license, or non open source licenses, and you need to review them closely before use.
knockout License
Best in #Model View Controller
Average in #Model View Controller
knockout License
Best in #Model View Controller
Average in #Model View Controller

buildReuse

  • knockout releases are available to install and integrate.
  • Deployable package is available in npm.
  • Installation instructions, examples and code snippets are available.
knockout Reuse
Best in #Model View Controller
Average in #Model View Controller
knockout Reuse
Best in #Model View Controller
Average in #Model View Controller
Top functions reviewed by kandi - BETA

kandi has reviewed knockout and discovered the below as its top functions. This is intended to give you an instant insight into knockout implemented functionality, and help decide if they suit your requirements.

  • Apply bindings .
  • generate a replacement string
  • Creates a new binding handler for binding bindings .
  • Parses object literal .
  • Compare two big array
  • Activates a binding on the given DOM node .
  • Updates binding context .
  • Updates the model with the checkbox .
  • Extracts params parameters from a custom element .
  • Takes an array of loaders and returns a result of calling this one .

knockout Key Features

Knockout makes it easier to create rich, responsive UIs with JavaScript

Building Knockout from sources

copy iconCopydownload iconDownload
git clone https://github.com/knockout/knockout.git
cd knockout

Upload button unresponsive after first iteration JQUERY

copy iconCopydownload iconDownload
<input type="file" id="input-excel" value="Choose File" accept=".xlsx" />

<div id="wrapper">

</div>

    
   // read and display the records from excel file on the screen
   
    // passing in my button id here
    $('#input-excel').change(function (e) {
        $('#wrapper')[0].innerHTML ="";
        var reader = new FileReader();
        reader.readAsArrayBuffer(e.target.files[0]);
        reader.onload = function (e) {
            var excelData = new Uint8Array(reader.result);
            var wb = XLSX.read(excelData, { type: 'array' });
            console.log(wb);

            var htmlstr = XLSX.write(wb, {/* sheet: "Sheet1",*/ type: 'binary', bookType: 'html'});
            $('#wrapper')[0].innerHTML += htmlstr;
        };
    });


-----------------------
<input type="file" id="input-excel" value="Choose File" accept=".xlsx" />

<div id="wrapper">

</div>

    
   // read and display the records from excel file on the screen
   
    // passing in my button id here
    $('#input-excel').change(function (e) {
        $('#wrapper')[0].innerHTML ="";
        var reader = new FileReader();
        reader.readAsArrayBuffer(e.target.files[0]);
        reader.onload = function (e) {
            var excelData = new Uint8Array(reader.result);
            var wb = XLSX.read(excelData, { type: 'array' });
            console.log(wb);

            var htmlstr = XLSX.write(wb, {/* sheet: "Sheet1",*/ type: 'binary', bookType: 'html'});
            $('#wrapper')[0].innerHTML += htmlstr;
        };
    });


Is there a function in Knockout.js to build an object from a data-bind attribute string?

copy iconCopydownload iconDownload
ko.applyBindings({});

const myDiv = document.querySelector("div")
console.log(
  ko.bindingProvider.instance.getBindings(myDiv, ko.contextFor(myDiv))
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="text: 'Hello', attr: { title: 'World' }"></div>
-----------------------
ko.applyBindings({});

const myDiv = document.querySelector("div")
console.log(
  ko.bindingProvider.instance.getBindings(myDiv, ko.contextFor(myDiv))
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="text: 'Hello', attr: { title: 'World' }"></div>

Finding and replacing attribute in HTML File

copy iconCopydownload iconDownload
<script>
  const getElement1 = document.querySelector(".data1");
  const getElement2 = document.querySelector(".data2");

  getElement1.removeAttribute("data-bind");
  getElement1.setAttribute(":id", "[[componentid]]");

  getElement2.removeAttribute("data-bind");
  getElement2.setAttribute(":id", "[[pageid]]");
</script>

Why am I directed to the same page when using routes in react js

copy iconCopydownload iconDownload
const App = () => {
  return (
    <Router>
      <Routes>
        <Route exact path="/">
          <Home/>
        </Route>
        <Route exact path="/memory" >
          <Mem/>
        </Route>
      </Routes>
    </Router>
  );
};

function Home(){
      return (
      <>
      <Navbar />
      <AMBox></AMBox>
      <Experience></Experience>
      <Projects></Projects>
      <Education></Education>
      </>
   )
}

function Mem(){
      return (<Memory />)
}
-----------------------
const App = () => {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/memory" element={<Memory />} />
        <Route
          path="/"
          element={(
            <>
              <AMBox />
              <Experience />
              <Projects />
              <Education />
            </>
          )}
        />
      </Routes>
    </Router>
  );
};

Type 'Observable&lt;false&gt;' is not assignable to type 'Observable&lt;boolean&gt;'

copy iconCopydownload iconDownload
function observable<T>(value: T extends infer U ? U: never): Observable<T>
{
  return undefined as any;  // the implementation is not important
}

const x: Observable<boolean> = observable(false); // no error
const bad = observable(false);
//     ^ unknown, which should be Observable<boolean>
declare function observable<T, U = any>(value?: T extends infer R ? R : U): 
    unknown extends T ? Observable<U> : Observable<T>
-----------------------
function observable<T>(value: T extends infer U ? U: never): Observable<T>
{
  return undefined as any;  // the implementation is not important
}

const x: Observable<boolean> = observable(false); // no error
const bad = observable(false);
//     ^ unknown, which should be Observable<boolean>
declare function observable<T, U = any>(value?: T extends infer R ? R : U): 
    unknown extends T ? Observable<U> : Observable<T>
-----------------------
function observable<T>(value: T extends infer U ? U: never): Observable<T>
{
  return undefined as any;  // the implementation is not important
}

const x: Observable<boolean> = observable(false); // no error
const bad = observable(false);
//     ^ unknown, which should be Observable<boolean>
declare function observable<T, U = any>(value?: T extends infer R ? R : U): 
    unknown extends T ? Observable<U> : Observable<T>
-----------------------
const x = observable<boolean>(false);
const x = observable<false | undefined>(false);
const y = observable(false);
-----------------------
const x = observable<boolean>(false);
const x = observable<false | undefined>(false);
const y = observable(false);

CSHTML button with javascript onlick function only works some times?

copy iconCopydownload iconDownload
$("input[class^='download'], input[class*=' download']").each(function () {
    $(this).click(function () {
    var id = $(this).attr('id');
    let passedValue = id.concat("-" + SDNo);
    attachVM.download(passedValue);
    });
$("input.download").on("click", function() {
    var id = $(this).attr('id');
    let passedValue = id.concat("-" + SDNo);
    attachVM.download(passedValue);
    });
-----------------------
$("input[class^='download'], input[class*=' download']").each(function () {
    $(this).click(function () {
    var id = $(this).attr('id');
    let passedValue = id.concat("-" + SDNo);
    attachVM.download(passedValue);
    });
$("input.download").on("click", function() {
    var id = $(this).attr('id');
    let passedValue = id.concat("-" + SDNo);
    attachVM.download(passedValue);
    });

How to iterate over a list of string using ko

copy iconCopydownload iconDownload
ko.applyBindings({ arrayOfStrings: [ "hello", "world" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: arrayOfStrings">
  <li data-bind="text: $data"></li>
</ul>
ko.applyBindings({ warnings: [ "careful!", "watch out!" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: { data: warnings, as: 'warning' }">
  <li data-bind="text: warning"></li>
</ul>
ko.applyBindings({ arrayOfStrings: [ "hello", "world" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: arrayOfStrings">
  <li data-bind="text: $parent.arrayOfStrings[$index()]"></li>
</ul>
-----------------------
ko.applyBindings({ arrayOfStrings: [ "hello", "world" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: arrayOfStrings">
  <li data-bind="text: $data"></li>
</ul>
ko.applyBindings({ warnings: [ "careful!", "watch out!" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: { data: warnings, as: 'warning' }">
  <li data-bind="text: warning"></li>
</ul>
ko.applyBindings({ arrayOfStrings: [ "hello", "world" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: arrayOfStrings">
  <li data-bind="text: $parent.arrayOfStrings[$index()]"></li>
</ul>
-----------------------
ko.applyBindings({ arrayOfStrings: [ "hello", "world" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: arrayOfStrings">
  <li data-bind="text: $data"></li>
</ul>
ko.applyBindings({ warnings: [ "careful!", "watch out!" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: { data: warnings, as: 'warning' }">
  <li data-bind="text: warning"></li>
</ul>
ko.applyBindings({ arrayOfStrings: [ "hello", "world" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: arrayOfStrings">
  <li data-bind="text: $parent.arrayOfStrings[$index()]"></li>
</ul>
-----------------------
ko.applyBindings({ arrayOfStrings: [ "hello", "world" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: arrayOfStrings">
  <li data-bind="text: $data"></li>
</ul>
ko.applyBindings({ warnings: [ "careful!", "watch out!" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: { data: warnings, as: 'warning' }">
  <li data-bind="text: warning"></li>
</ul>
ko.applyBindings({ arrayOfStrings: [ "hello", "world" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: arrayOfStrings">
  <li data-bind="text: $parent.arrayOfStrings[$index()]"></li>
</ul>
-----------------------
ko.applyBindings({ arrayOfStrings: [ "hello", "world" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: arrayOfStrings">
  <li data-bind="text: $data"></li>
</ul>
ko.applyBindings({ warnings: [ "careful!", "watch out!" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: { data: warnings, as: 'warning' }">
  <li data-bind="text: warning"></li>
</ul>
ko.applyBindings({ arrayOfStrings: [ "hello", "world" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: arrayOfStrings">
  <li data-bind="text: $parent.arrayOfStrings[$index()]"></li>
</ul>
-----------------------
ko.applyBindings({ arrayOfStrings: [ "hello", "world" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: arrayOfStrings">
  <li data-bind="text: $data"></li>
</ul>
ko.applyBindings({ warnings: [ "careful!", "watch out!" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: { data: warnings, as: 'warning' }">
  <li data-bind="text: warning"></li>
</ul>
ko.applyBindings({ arrayOfStrings: [ "hello", "world" ] });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: arrayOfStrings">
  <li data-bind="text: $parent.arrayOfStrings[$index()]"></li>
</ul>

KnockoutJS: select option with a background image

copy iconCopydownload iconDownload
<select data-bind="
    options: fonts, 
    optionsText: 'name' ,
    value: activeModel().operations()[0].fonts_id,
    optionsAfterRender: backgroundImage"></select>
// In your question, this array is longer.
let fontsOrigArray =[{"name":"1 BigCheese DNA","alias":"1 BigCheese DNA","id":94},{"name":"A Charming Font Expanded","alias":"A Charming Font","id":1},{"name":"a Papa","alias":"a Papa","id":2},{"name":"Aardvark Cafe","alias":"Aardvark Cafe","id":3},{"name":"Accidental Presidency","alias":"Accidental Presidency","id":95},{"name":"Action Is, Shaded JL","alias":"Action Is","id":4},{"name":"Action Jackson","alias":"Action Jackson","id":98},{"name":"Action Man","alias":"Action Man","id":97},{"name":"ActionIs","alias":"ActionIs","id":155},{"name":"Adventure","alias":"Adventure","id":154},{"name":"Advert","alias":"Advert","id":255},{"name":"African","alias":"African","id":8},{"name":"Airstream","alias":"Airstream","id":96},{"name":"akaHoggle","alias":"akaHoggle","id":189},{"name":"Aklatanic TSO","alias":"Aklatanic TSO","id":236}];

function ViewModel(fontsOrig) {
  this.valueSelected = ko.observable(''); // It must be activeModel().operations()[0].fonts_id

  this.fonts = fontsOrig;
  this.backgroundImage = function(option, item) {
    ko.applyBindingsToNode(
      option, {
        style: {
          'background-image': 'url(\'' + '/images/fontthumbs/' + item.id + '.png' + '\')'
        }
      },
      item);
  }

}

ko.applyBindings(new ViewModel(fontsOrigArray));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<select data-bind="options: fonts, 
optionsText: 'name' , 
optionsValue: 'id',
value: valueSelected,
optionsAfterRender: backgroundImage"></select>
-----------------------
<select data-bind="
    options: fonts, 
    optionsText: 'name' ,
    value: activeModel().operations()[0].fonts_id,
    optionsAfterRender: backgroundImage"></select>
// In your question, this array is longer.
let fontsOrigArray =[{"name":"1 BigCheese DNA","alias":"1 BigCheese DNA","id":94},{"name":"A Charming Font Expanded","alias":"A Charming Font","id":1},{"name":"a Papa","alias":"a Papa","id":2},{"name":"Aardvark Cafe","alias":"Aardvark Cafe","id":3},{"name":"Accidental Presidency","alias":"Accidental Presidency","id":95},{"name":"Action Is, Shaded JL","alias":"Action Is","id":4},{"name":"Action Jackson","alias":"Action Jackson","id":98},{"name":"Action Man","alias":"Action Man","id":97},{"name":"ActionIs","alias":"ActionIs","id":155},{"name":"Adventure","alias":"Adventure","id":154},{"name":"Advert","alias":"Advert","id":255},{"name":"African","alias":"African","id":8},{"name":"Airstream","alias":"Airstream","id":96},{"name":"akaHoggle","alias":"akaHoggle","id":189},{"name":"Aklatanic TSO","alias":"Aklatanic TSO","id":236}];

function ViewModel(fontsOrig) {
  this.valueSelected = ko.observable(''); // It must be activeModel().operations()[0].fonts_id

  this.fonts = fontsOrig;
  this.backgroundImage = function(option, item) {
    ko.applyBindingsToNode(
      option, {
        style: {
          'background-image': 'url(\'' + '/images/fontthumbs/' + item.id + '.png' + '\')'
        }
      },
      item);
  }

}

ko.applyBindings(new ViewModel(fontsOrigArray));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<select data-bind="options: fonts, 
optionsText: 'name' , 
optionsValue: 'id',
value: valueSelected,
optionsAfterRender: backgroundImage"></select>
-----------------------
<select data-bind="
    options: fonts, 
    optionsText: 'name' ,
    value: activeModel().operations()[0].fonts_id,
    optionsAfterRender: backgroundImage"></select>
// In your question, this array is longer.
let fontsOrigArray =[{"name":"1 BigCheese DNA","alias":"1 BigCheese DNA","id":94},{"name":"A Charming Font Expanded","alias":"A Charming Font","id":1},{"name":"a Papa","alias":"a Papa","id":2},{"name":"Aardvark Cafe","alias":"Aardvark Cafe","id":3},{"name":"Accidental Presidency","alias":"Accidental Presidency","id":95},{"name":"Action Is, Shaded JL","alias":"Action Is","id":4},{"name":"Action Jackson","alias":"Action Jackson","id":98},{"name":"Action Man","alias":"Action Man","id":97},{"name":"ActionIs","alias":"ActionIs","id":155},{"name":"Adventure","alias":"Adventure","id":154},{"name":"Advert","alias":"Advert","id":255},{"name":"African","alias":"African","id":8},{"name":"Airstream","alias":"Airstream","id":96},{"name":"akaHoggle","alias":"akaHoggle","id":189},{"name":"Aklatanic TSO","alias":"Aklatanic TSO","id":236}];

function ViewModel(fontsOrig) {
  this.valueSelected = ko.observable(''); // It must be activeModel().operations()[0].fonts_id

  this.fonts = fontsOrig;
  this.backgroundImage = function(option, item) {
    ko.applyBindingsToNode(
      option, {
        style: {
          'background-image': 'url(\'' + '/images/fontthumbs/' + item.id + '.png' + '\')'
        }
      },
      item);
  }

}

ko.applyBindings(new ViewModel(fontsOrigArray));
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>


<select data-bind="options: fonts, 
optionsText: 'name' , 
optionsValue: 'id',
value: valueSelected,
optionsAfterRender: backgroundImage"></select>

KnockoutJS foreach binding add outline around selected items

copy iconCopydownload iconDownload
[
    {text: 'Mon', active: true},
    {text: 'Tue', active: true},
    {text: 'Wed', active: true},
    {text: 'Tue', active: false},
    {text: 'Fri', active: false},
    {text: 'Sat', active: true},
    {text: 'Sun', active: true}
]
[
  [
    {text: 'Mon', active: true},
    {text: 'Tue', active: true},
    {text: 'Wed', active: true}
  ],
  [
    {text: 'Tue', active: false},
    {text: 'Fri', active: false},
  ],
  [
    {text: 'Sat', active: true},
    {text: 'Sun', active: true}
  ]
]
function Button(params) {
  this.text = params.text;
  this.active = ko.observable(params.active);
  this.toggle = () => this.active(!this.active());
}

function ButtonList(params) {
  this.buttons = ko.observableArray(params.buttons.map(b => new Button(b)));
  this.buttonGroups = ko.pureComputed(() => {
    const groups = [];
    let prev = null, group = null;
    this.buttons().forEach(b => {
      if (b.active() !== prev) {
        group = [];
        groups.push(group);
        prev = b.active();
      }
      group.push(b);
    });
    return groups;
  });
}

const vm = new ButtonList({
  buttons: [
    {text: 'Mon', active: true},
    {text: 'Tue', active: true},
    {text: 'Wed', active: true},
    {text: 'Tue', active: false},
    {text: 'Fri', active: false},
    {text: 'Sat', active: true},
    {text: 'Sun', active: true}
  ]
});
ko.applyBindings(vm);
.btns {
  display: flex;
}
.btn-group {
  display: flex;
  outline-offset: 2px;
}
.btn-group.active {
  outline: 2px solid black;
}
.btn-group > * {
  width: 50px;
  padding: 5px;
  margin: 0;
  text-align: center;
}
.btn-group > .active {
  background-color: black;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="btns" data-bind="foreach: buttonGroups">
  <div class="btn-group" data-bind="foreach: $data, css: {active: $data[0].active}">
    <div data-bind="click: toggle, text: text, css: {active: active}"></div>
  </div>
</div>
-----------------------
[
    {text: 'Mon', active: true},
    {text: 'Tue', active: true},
    {text: 'Wed', active: true},
    {text: 'Tue', active: false},
    {text: 'Fri', active: false},
    {text: 'Sat', active: true},
    {text: 'Sun', active: true}
]
[
  [
    {text: 'Mon', active: true},
    {text: 'Tue', active: true},
    {text: 'Wed', active: true}
  ],
  [
    {text: 'Tue', active: false},
    {text: 'Fri', active: false},
  ],
  [
    {text: 'Sat', active: true},
    {text: 'Sun', active: true}
  ]
]
function Button(params) {
  this.text = params.text;
  this.active = ko.observable(params.active);
  this.toggle = () => this.active(!this.active());
}

function ButtonList(params) {
  this.buttons = ko.observableArray(params.buttons.map(b => new Button(b)));
  this.buttonGroups = ko.pureComputed(() => {
    const groups = [];
    let prev = null, group = null;
    this.buttons().forEach(b => {
      if (b.active() !== prev) {
        group = [];
        groups.push(group);
        prev = b.active();
      }
      group.push(b);
    });
    return groups;
  });
}

const vm = new ButtonList({
  buttons: [
    {text: 'Mon', active: true},
    {text: 'Tue', active: true},
    {text: 'Wed', active: true},
    {text: 'Tue', active: false},
    {text: 'Fri', active: false},
    {text: 'Sat', active: true},
    {text: 'Sun', active: true}
  ]
});
ko.applyBindings(vm);
.btns {
  display: flex;
}
.btn-group {
  display: flex;
  outline-offset: 2px;
}
.btn-group.active {
  outline: 2px solid black;
}
.btn-group > * {
  width: 50px;
  padding: 5px;
  margin: 0;
  text-align: center;
}
.btn-group > .active {
  background-color: black;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="btns" data-bind="foreach: buttonGroups">
  <div class="btn-group" data-bind="foreach: $data, css: {active: $data[0].active}">
    <div data-bind="click: toggle, text: text, css: {active: active}"></div>
  </div>
</div>
-----------------------
[
    {text: 'Mon', active: true},
    {text: 'Tue', active: true},
    {text: 'Wed', active: true},
    {text: 'Tue', active: false},
    {text: 'Fri', active: false},
    {text: 'Sat', active: true},
    {text: 'Sun', active: true}
]
[
  [
    {text: 'Mon', active: true},
    {text: 'Tue', active: true},
    {text: 'Wed', active: true}
  ],
  [
    {text: 'Tue', active: false},
    {text: 'Fri', active: false},
  ],
  [
    {text: 'Sat', active: true},
    {text: 'Sun', active: true}
  ]
]
function Button(params) {
  this.text = params.text;
  this.active = ko.observable(params.active);
  this.toggle = () => this.active(!this.active());
}

function ButtonList(params) {
  this.buttons = ko.observableArray(params.buttons.map(b => new Button(b)));
  this.buttonGroups = ko.pureComputed(() => {
    const groups = [];
    let prev = null, group = null;
    this.buttons().forEach(b => {
      if (b.active() !== prev) {
        group = [];
        groups.push(group);
        prev = b.active();
      }
      group.push(b);
    });
    return groups;
  });
}

const vm = new ButtonList({
  buttons: [
    {text: 'Mon', active: true},
    {text: 'Tue', active: true},
    {text: 'Wed', active: true},
    {text: 'Tue', active: false},
    {text: 'Fri', active: false},
    {text: 'Sat', active: true},
    {text: 'Sun', active: true}
  ]
});
ko.applyBindings(vm);
.btns {
  display: flex;
}
.btn-group {
  display: flex;
  outline-offset: 2px;
}
.btn-group.active {
  outline: 2px solid black;
}
.btn-group > * {
  width: 50px;
  padding: 5px;
  margin: 0;
  text-align: center;
}
.btn-group > .active {
  background-color: black;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="btns" data-bind="foreach: buttonGroups">
  <div class="btn-group" data-bind="foreach: $data, css: {active: $data[0].active}">
    <div data-bind="click: toggle, text: text, css: {active: active}"></div>
  </div>
</div>
-----------------------
[
    {text: 'Mon', active: true},
    {text: 'Tue', active: true},
    {text: 'Wed', active: true},
    {text: 'Tue', active: false},
    {text: 'Fri', active: false},
    {text: 'Sat', active: true},
    {text: 'Sun', active: true}
]
[
  [
    {text: 'Mon', active: true},
    {text: 'Tue', active: true},
    {text: 'Wed', active: true}
  ],
  [
    {text: 'Tue', active: false},
    {text: 'Fri', active: false},
  ],
  [
    {text: 'Sat', active: true},
    {text: 'Sun', active: true}
  ]
]
function Button(params) {
  this.text = params.text;
  this.active = ko.observable(params.active);
  this.toggle = () => this.active(!this.active());
}

function ButtonList(params) {
  this.buttons = ko.observableArray(params.buttons.map(b => new Button(b)));
  this.buttonGroups = ko.pureComputed(() => {
    const groups = [];
    let prev = null, group = null;
    this.buttons().forEach(b => {
      if (b.active() !== prev) {
        group = [];
        groups.push(group);
        prev = b.active();
      }
      group.push(b);
    });
    return groups;
  });
}

const vm = new ButtonList({
  buttons: [
    {text: 'Mon', active: true},
    {text: 'Tue', active: true},
    {text: 'Wed', active: true},
    {text: 'Tue', active: false},
    {text: 'Fri', active: false},
    {text: 'Sat', active: true},
    {text: 'Sun', active: true}
  ]
});
ko.applyBindings(vm);
.btns {
  display: flex;
}
.btn-group {
  display: flex;
  outline-offset: 2px;
}
.btn-group.active {
  outline: 2px solid black;
}
.btn-group > * {
  width: 50px;
  padding: 5px;
  margin: 0;
  text-align: center;
}
.btn-group > .active {
  background-color: black;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="btns" data-bind="foreach: buttonGroups">
  <div class="btn-group" data-bind="foreach: $data, css: {active: $data[0].active}">
    <div data-bind="click: toggle, text: text, css: {active: active}"></div>
  </div>
</div>
-----------------------
[
    {text: 'Mon', active: true},
    {text: 'Tue', active: true},
    {text: 'Wed', active: true},
    {text: 'Tue', active: false},
    {text: 'Fri', active: false},
    {text: 'Sat', active: true},
    {text: 'Sun', active: true}
]
[
  [
    {text: 'Mon', active: true},
    {text: 'Tue', active: true},
    {text: 'Wed', active: true}
  ],
  [
    {text: 'Tue', active: false},
    {text: 'Fri', active: false},
  ],
  [
    {text: 'Sat', active: true},
    {text: 'Sun', active: true}
  ]
]
function Button(params) {
  this.text = params.text;
  this.active = ko.observable(params.active);
  this.toggle = () => this.active(!this.active());
}

function ButtonList(params) {
  this.buttons = ko.observableArray(params.buttons.map(b => new Button(b)));
  this.buttonGroups = ko.pureComputed(() => {
    const groups = [];
    let prev = null, group = null;
    this.buttons().forEach(b => {
      if (b.active() !== prev) {
        group = [];
        groups.push(group);
        prev = b.active();
      }
      group.push(b);
    });
    return groups;
  });
}

const vm = new ButtonList({
  buttons: [
    {text: 'Mon', active: true},
    {text: 'Tue', active: true},
    {text: 'Wed', active: true},
    {text: 'Tue', active: false},
    {text: 'Fri', active: false},
    {text: 'Sat', active: true},
    {text: 'Sun', active: true}
  ]
});
ko.applyBindings(vm);
.btns {
  display: flex;
}
.btn-group {
  display: flex;
  outline-offset: 2px;
}
.btn-group.active {
  outline: 2px solid black;
}
.btn-group > * {
  width: 50px;
  padding: 5px;
  margin: 0;
  text-align: center;
}
.btn-group > .active {
  background-color: black;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div class="btns" data-bind="foreach: buttonGroups">
  <div class="btn-group" data-bind="foreach: $data, css: {active: $data[0].active}">
    <div data-bind="click: toggle, text: text, css: {active: active}"></div>
  </div>
</div>

The 'image' attribute has no file associated with it in django

copy iconCopydownload iconDownload
{% if products.image %}
    Image :- <img src="{{products.image.url}}" alt="image"><br><br>
{% endif %}
-----------------------
<form method="post" enctype="multipart/form-data" action ="">
      {% csrf_token %}
       
        <table border="1">
    <tr>
        <td>Title:
        <input type="text" name="title" id="title" data-bind="value: title"></td>
        <br>
    </tr>
    <tr>
        <td>Description:
        <textarea name="description" id="description">Description</textarea></td>
        <br>
    </tr>
    <tr>
        <td>Image:
        <input type="file" name="image" id="image"></td>
        <br>
    </tr>
    
    <tr>
        <td><button type="submit" id="submit" data-bind="submit: mySubmit">Submit</button></td>
    </tr>

</table>
</form>

Community Discussions

Trending Discussions on knockout
  • Upload button unresponsive after first iteration JQUERY
  • Is there a function in Knockout.js to build an object from a data-bind attribute string?
  • Finding and replacing attribute in HTML File
  • Why am I directed to the same page when using routes in react js
  • Type 'Observable&lt;false&gt;' is not assignable to type 'Observable&lt;boolean&gt;'
  • CSHTML button with javascript onlick function only works some times?
  • How to iterate over a list of string using ko
  • Unable to convert jquery ajax response to array javascript
  • Why doesnt the page scroll down?
  • KnockoutJS: select option with a background image
Trending Discussions on knockout

QUESTION

Upload button unresponsive after first iteration JQUERY

Asked 2022-Apr-01 at 01:14

I have a button that uploads the excel file.

<input type="file" id="input-excel" value="Choose File" accept=".xlsx" />

Below is an embedded script in the HTML to read the excel file and display it in the UI.

<script type="text/javascript">
    
   // read and display the records from excel file on the screen
   
    // passing in my button id here
    $('#input-excel').change(function (e) {
        var reader = new FileReader();
        reader.readAsArrayBuffer(e.target.files[0]);

        reader.onload = function (e) {
            var excelData = new Uint8Array(reader.result);
            var wb = XLSX.read(excelData, { type: 'array' });
            console.log(wb);

            var htmlstr = XLSX.write(wb, {/* sheet: "Sheet1",*/ type: 'binary', bookType: 'html'});
            $('#wrapper')[0].innerHTML += htmlstr;
        };
    });
</script>

@section scripts{

    <script src="~/Scripts/ViewModels/RmaCreation/rmacreation.js"></script>
    <script src="~/Scripts/knockout-3.2.0.js"></script>
    <script language="javascript" src="~/Scripts/xlsx.full.min.js"></script>

}

I am able to upload excel file in the first iteration. I can see the records from the excel file in the UI.

However, the button becomes unresponsive in the second iteration. How do I make this button responsive after every iteration?

ANSWER

Answered 2022-Apr-01 at 01:14
<input type="file" id="input-excel" value="Choose File" accept=".xlsx" />

<div id="wrapper">

</div>

    
   // read and display the records from excel file on the screen
   
    // passing in my button id here
    $('#input-excel').change(function (e) {
        $('#wrapper')[0].innerHTML ="";
        var reader = new FileReader();
        reader.readAsArrayBuffer(e.target.files[0]);
        reader.onload = function (e) {
            var excelData = new Uint8Array(reader.result);
            var wb = XLSX.read(excelData, { type: 'array' });
            console.log(wb);

            var htmlstr = XLSX.write(wb, {/* sheet: "Sheet1",*/ type: 'binary', bookType: 'html'});
            $('#wrapper')[0].innerHTML += htmlstr;
        };
    });


You haven't included wrapper div in your code so i am not sure where/how you've placed it.

It seems to work fine in this fiddle. Are you able to recreate the issue here?

Source https://stackoverflow.com/questions/71697563

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install knockout

Totally new to Knockout? The most fun place to start is the online interactive tutorials. For more details, see.
Documentation on the project's website
Online examples at http://knockoutjs.com/examples/

Support

For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

DOWNLOAD this Library from

Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

Share this Page

share link
Consider Popular Model View Controller Libraries
Compare Model View Controller Libraries with Highest Support
Compare Model View Controller Libraries with Permissive License
Compare Model View Controller Libraries with Highest Reuse
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from
over 430 million Knowledge Items
Find more libraries
Reuse Solution Kits and Libraries Curated by Popular Use Cases

Save this library and start creating your kit

  • © 2022 Open Weaver Inc.